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

卡斯珀特

当collapseTest使用JS将类添加到标题时，我正在处理标题动画。我已经做到了，您可以在此处看到一个实时示例：http : //codepen.io/anon/pen/RPEpyM

不幸的是，当您查看我的实时代码时，您会看到菜单所在的左侧部分与旁边的绿色条的底部没有同时进行动画处理。我想同时为两个底部，菜单方块和绿色块设置动画。这可能吗？我该如何实现呢？

对于动画，我使用了css transition属性：

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

如有任何疑问，请在下面发表评论。预先感谢您的宝贵时间。

穆扎米尔·阿巴斯

我修改了你的课程

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

.......

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

或者

我们可以通过在一个元素内开发一种结构并将过渡应用于父元素来做到这一点，以便子元素在过渡时看起来很棒。谢谢

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。