JSFIDDLE： http://jsfiddle.net/Qvh7G/。

Question

我有jsFiddle。单击按钮时，我想立即将红色div放在黑色背后，然后启动动画。

var red = document.getElementById("red");
var button = document.getElementById("button");

button.addEventListener("click",function () {
    red.style.zIndex = -1;
    red.classList.remove("shifted");
});

然而，正如您所看到的，它们似乎是作为两个单独的动作发生的。我知道我可以使用setTimeout等到应用zIndex属性，但我不知道我应该等多久，并且持续时间可能因浏览器而异。

我应该创建一个循环来检查是否应用了zindex？但这听起来也像是一个非智能的解决方案。什么是正确的方法？

编辑：我不想更改黑色div上的zIndex。

Answer 1

您可以绑定到元素的转换状态，如下所示：

("#mySelector").bind("transitionend", function(){ 'yourcodehere' });

另外，这里有一些信息：

没有jQuery：

el.addEventListener("transitionend", updateTransition, true);

编辑：

对于：

的使用存在一些混淆

-webkit-transition-duration: 1s;

这也适用于样式。因此，只要您对其所在的元素进行更改，就会触发此操作。您有两个转换调用，一个用于设置z-index，另一个用于移动。

Answer 2

问题在于z索引 - 转换时间延迟了zIndex的变化。

您可以简单地强制transform属性的持续时间。

替换：

-webkit-transition-duration: 1s;

使用

-webkit-transition: -webkit-transform 1s; // ease-in;

Answer 3

刚刚放一个

-webkit-transition-property: -webkit-transform;

进入#red，一切都很好。 ;）这仅将transition应用于指定的属性。

JSFIDDLE： http://jsfiddle.net/Qvh7G/。

如何正确等待JavaScript应用内联Css

3 个答案:

JSFIDDLE： http://jsfiddle.net/Qvh7G/。