检测转换是否起飞

Question

有没有办法检测应用CSS类的组合是否会导致转换开始？

假设您有一个包含以下CSS类的元素：

.my-class {
  transition:1s linear all;
}

我们假设您将此类添加到元素中：

.red {
  background:red;
}

动画可能会或可能不会起飞。这取决于元素的状态和过渡属性。以下因素影响它，使其不起飞：

1. 如果元素的背景颜色已经是红色。
2. 如果transition-property不是all并且属性不是背景颜色。
3. 如果.red CSS类'的红色值没有赢得现有的背景颜色值（如果元素上存在较重的CSS选择器）。
4. 如果.red CSS类根本不存在，但仍然应用于元素。

这些情况会阻止库或框架知道动画是否已经运行，并且它们又需要提供setTimeout操作以在后台运行以在持续时间之后清除动画。这是一个问题，因为它会导致代码和问题混乱。

如果无论如何都要检测元素的过渡动画是否真的在进行中？如果有transitionstart之类的内容可以检测到这一点会非常有用。是否在元素和/或文档上设置了一些属性或标志，我可以在其中查询过渡动画是否在途中？

我能看到这个工作的唯一方法是，如果您在一个或两个动画帧之后执行深层复制并比较从getComputedStyle返回的数据。由于getComputedStyle返回指针而不是实际对象，因此您需要执行两次深度复制。我无法做到这一点：D

如果你想知道，我正在拍摄动画的方式是：

1. 在元素上运行getComputedStyle以检测其transition-duration值。
2. 如果duration > 0，则添加CSS类并等待requestAnimationFrame运行。这就是触发动画的原因。
3. 等待transitionend，如果没有，请等待超时清理。

Answer 1

不，没有像动画那样的transitionstart事件。您基本上已经概述了使用计算样式确定的最佳方法。也许使用可以更好地控制的动画将是最简单的解决方案？

这是一篇关于这个主题的精彩文章：http://css-tricks.com/controlling-css-animations-transitions-javascript/