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

Question

我正在制作一个 header 动画，当 class collapseTest 使用 JS 添加到 header 时。我已经这样做了，你可以在这里看到一个活生生的例子：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 两者的过渡，菜单块和其余部分（菜单旁边的白色和绿色条），但我无法将其设置为动画同步。

我在菜单上添加了这些动画，当 class collapseTest 添加到带有 JS 的 header 元素时，顶部的白色条和下方的绿色条：

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

我修改了你的class

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

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

How to animate multiple elements at the same time?

html

css

jquery

css-transitions