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

我有这个。单击按钮时，我想立即将红色div放在黑色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吗？但这听起来也是一个不明智的解决方案。正确的方法是什么

---

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

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

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

此外，这里还有一些信息：

没有jQuery：

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

编辑：

关于以下各项的使用存在一些混乱：

-webkit-transition-duration: 1s;

---

这也像样式一样应用。所以，只要你对它所在的元素进行修改，你就会触发它。您有两个转换调用，一个用于设置z索引，另一个用于移动。

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

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

此外，这里还有一些信息：

没有jQuery：

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

编辑：

关于以下各项的使用存在一些混乱：

-webkit-transition-duration: 1s;

---

这也像样式一样应用。所以，只要你对它所在的元素进行修改，你就会触发它。您有两个转换调用，一个用于设置z索引，另一个用于移动。

问题在于zIndex-转换时间延迟了zIndex中的更改

您只需强制设置

转换

属性的持续时间即可

替换：

-webkit-transition-duration: 1s;

与

---

问题在于zIndex-转换时间延迟了zIndex中的更改

您只需强制设置

转换

属性的持续时间即可

替换：

-webkit-transition-duration: 1s;

与

放一个

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

进入

#红色

，一切正常这仅将

转换应用于指定的属性

JSFIDDLE:只要放一个

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

进入
#红色
，一切正常这仅将
转换应用于指定的属性

JSFIDDLE:。您可以在setTimeout中安全地等待零毫秒，以使更改生效。这不起作用。也许我做得不对。你能告诉我怎么做吗？你可以安全地在setTimeout中等待零毫秒，以使更改生效。这不起作用。也许我做得不对。你能告诉我怎么做吗？你可能想指出你的答案需要jQuery，而问题并没有标记。没问题，从mozilla网站添加了这个例子。如果您不熟悉回调函数，我强烈建议您阅读它以更好地理解它。我在这里有点困惑。
transitionend
与更改z索引有什么关系？谢谢您的回答，但这可能不起作用，因为我想先隐藏div，然后执行转换。不，您有两个，您设置的-webkit转换持续时间：1s；在你的#red元素上，所以任何时候你改变这个元素，都需要1秒。因此，设置z-index需要1秒，移动也需要1秒。您可能需要指出，您的答案需要jQuery，而问题没有标记jQuery。没问题，从mozilla站点添加了该示例。如果您不熟悉回调函数，我强烈建议您阅读它以更好地理解它。我在这里有点困惑。
transitionend
与更改z索引有什么关系？谢谢您的回答，但这可能不起作用，因为我想先隐藏div，然后执行转换。不，您有两个，您设置的-webkit转换持续时间：1s；在你的#red元素上，所以任何时候你改变这个元素，都需要1秒。因此，设置z-index需要1秒，移动也需要1秒。我尝试过这个方法，但在按钮单击和动画开始之间有一个明显的延迟。您希望div调整大小，并且一旦调整完毕-将其更改为黑色？没有调整大小或更改颜色。只是z-index更新和animation.ahh，问题在于zIndex-它不是即时的，因为像这样的过渡，虽然它不是我想要的，因为它只是通过使用
轻松进入
来延迟动画。但它看起来是有效的！我试过了，但是在点击按钮和动画开始之间有一个明显的延迟。你想让div重新调整大小，一旦调整完毕-将其更改为黑色？没有调整大小或更改颜色。只是z-index更新和animation.ahh，问题在于zIndex-它不是即时的，因为像这样的过渡，虽然它不是我想要的，因为它只是通过使用
轻松进入
来延迟动画。但它看起来是有效的！