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

Question

我有这个jsFiddle .单击按钮时，我想立即将红色 div 放在黑色 div 后面，然后开始动画。

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

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

但是，如您所见，它们似乎是作为两个独立的 Action 发生的。我知道我可以使用 setTimeout 等待 zIndex 属性被应用，但我不知道我应该等待多长时间，持续时间可能因浏览器和计算机而异。

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

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

Answer 1

你可以绑定(bind)到元素的转换状态，像这样:

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

另外，这里有一些关于它的信息:

• > https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
• > https://developer.mozilla.org/en-US/docs/Web/Reference/Events/transitionend

没有 jQuery:

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

编辑:

对于以下的用法存在一些混淆:

-webkit-transition-duration: 1s;

这也像样式一样应用。因此，无论何时您对其所在的元素进行更改，都会触发它。您有两个转换调用，一个用于设置 z-index，另一个用于移动。