CSS3、WebKit 过渡顺序？如何排队等候转场？

Question

我有以下问题：

-webkit-transition-property: top, bottom, z-index;
-webkit-transition-duration: 0.5s;

问题是我不希望 z-index 在 top & 之后转换。底部完成。

有没有办法告诉 Webkit 过渡到顶部/底部过渡，然后完成后立即或持续时间执行 z-index，无论哪种方式？

谢谢

Answer 1

您必须指定 z-index 转换的延迟：

-webkit-transition-property: top, bottom, z-index;
-webkit-transition-duration: 0.5s;
-webkit-transition-delay: 0s, 0s, .5s;

Answer 2

对于您的信息，在 javascript 中，您还可以侦听 webkitTransitionEnd 事件并在触发此事件时修改 z-index。

该事件有两个有用的属性：

• propertyName ：转换中涉及的属性的名称
• elapsedTime ：转换期间经过的时间