检测过渡是否起飞

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/