如何同时为多个元素设置动画？

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;
}