如何在同一时间动画多个元素

Question

我正在制作头部动画，当类collapseTest被添加到JS的头部时。我已经这样做了，您可以在这里看到一个实时示例:http://codepen.io/anon/pen/RPEpyM

不幸的是，当你看一下我的实时代码时，你会发现左边的部分，菜单所在的位置，并没有与旁边的绿色条底部同时动画。我想同时动画两个底部，菜单方块和绿色方块。这可能吗?我该怎么做呢?

对于动画，我使用了css过渡属性:

-webkit-transition: all 1s ease-in-out 0s;
-moz-transition: all 1s ease-in-out 0s;
-o-transition: all 1s ease-in-out 0s;
transition: all 1s ease-in-out 0s;

我玩了两个过渡的duration，菜单块和其余部分(菜单旁边的白色和绿色条)，但我不能得到它的动画同步。

我在菜单上添加了这些动画，白色的条在顶部，绿色的条在它下面，当类collapseTest被添加到标题元素与JS:

function explode() {
    $('header').addClass('collapseTest');
};
setTimeout(explode, 800);

css声明的一个例子:

#header.collapseTest .toggle-menu {
    -webkit-transition: all 0.81s ease-in-out 0s;
    -moz-transition: all 0.81s ease-in-out 0s;
    -o-transition: all 0.81s ease-in-out 0s;
    transition: all 0.81s ease-in-out 0s;
}

如果有任何问题，请在下面留言。感谢您的宝贵时间。

Answer 1

我已经修改了你的类

#header.collapseTest .top {
height: 0;
margin: -1px;
-webkit-transition: all 0.935s ease-in-out 0s;
-moz-transition: all 0.935s ease-in-out 0s;
-o-transition: all 0.935s ease-in-out 0s;
transition: all 0.935s ease-in-out 0s;
}

.......

由于不同值的过渡完成时间是相同的，我们可以通过降低一个元素的速度来调整速度。

或

我们可以通过在一个元素内部开发一个结构，并在父元素上应用过渡，这样子元素在过渡时看起来会很好。由于

Answer 2

我找到解决办法了。

你会发现这很难相信，但似乎有一个问题在如何过渡发生。不知何故，如果你混合%和pixels，转换，似乎是串联工作(尽管它仍然是同步的)。

我的意思是，在你的导航，你动画的高度，所以也在div.bottom上，问题是其中一个有一个基于像素的高度，另一个有一个基于%的高度。所以要得到你想要的，即两个元素应该以相同的方式动画，改变两个元素的高度为基于像素或基于%。

改变下面的样式:

#header > div {
    height: 50%;  // see how this is percentage based 
    width: calc(100% - 180px)!important;
    padding-left: 26px;
    display: table;
} 

:

#header > div {
    height: 75px;  // 75px is = 50% in your case, might hurt responsive design !!
    width: calc(100% - 180px)!important;
    padding-left: 26px;
    display: table;
}