css - 检测转换是否开始

Question

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

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

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

假设您将此类添加到元素中:

.red {
  background:red;
}

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

1. 如果元素的背景颜色已经是红色。
2. 如果过渡属性不是全部且不是背景色的属性。
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/