Question

当使用JS将类collapseTest添加到标头时，我正在处理标题动画。我已经这样做了，你可以在这里看到一个实例：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，菜单块和菜单块的其余部分（菜单旁边的白色和绿色栏），但是我无法让它同步动画。

我在菜单上添加了这些动画，当使用JS将类collapseTest添加到标题元素时，顶部的白色条和下面的绿色条：

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

如何同时为多个元素制作动画？

2 个答案: