css3如何在转换中途完成时触发事件？

Question

我认为一切都在标题中。 我用javascript添加一个基本上做的类：

.rotation {
   transform:rotateY(180deg);
   transition-timing-function: linear;
   -webkit-transition-timing-function: linear;
}

我需要知道转换何时达到90度。这些值仅供参考。问题是，如果我重复2次90degs的转换，我会在中间得到一个短暂的延迟，而不是在Chrome下但在Microsoft Edge和Firefox下。

是否有人有解决方案，要么中途触发事件，要么在重复过渡时避免这种滞后？

谢谢！

Answer 1

我认为实现目标的最简单方法是在某些不可见的属性上设置额外的转换。

我有时使用z-index，但你可以选择另一个。然后：

div {
    transition: transform 1s linear, z-index 0.5s linear;
    z-index: 1;
}
.rotation {
    z-index: 2;
    transform:rotateY(180deg);
}

您将获得2个事件，第一个事件为0.5秒