Css 检测转换是否开始

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

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

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

假设您将这个类添加到元素中：

.red {
  background:red;
}

动画可能会启动，也可能不会启动。这取决于元素的状态和转换属性。以下因素会影响它，使其无法起飞：

如果元素的背景色已为红色

如果过渡属性不是全部且不是背景色的属性

如果

.red

CSS类的红色值与现有背景色值不匹配（如果元素上存在较重的CSS选择器）

如果

.red

CSS类根本不存在，但仍然应用于元素

这些情况使库或框架无法知道动画是否已运行，而它们又需要提供setTimeout操作以在后台运行，以便在持续时间后（如果未触发任何操作）清理动画。这是一个问题，因为它会导致混乱的代码和问题

是否仍需要检测以查看元素的过渡动画是否实际正在进行？如果有类似于

transitionstart

的东西来检测这一点，那将非常有用。是否在元素和/或文档上设置了一些属性或标志，我可以在这些属性或标志上查询以查看转换动画是否正在进行中

我能看到这种效果的唯一方法是，在一到两个动画帧之后，进行深度复制并比较从

getComputedStyle

返回的数据。由于getComputedStyle返回的是指针而不是实际对象，因此需要执行两次深度复制。我不可能做这个：D

如果你想知道，我制作动画的方法是：

在元素上运行

getComputedStyle

，以检测其

转换持续时间

值

如果

duration>0

，则添加CSS类并等待

requestAnimationFrame

运行。这就是触发动画的原因

等待

transitionend

，如果没有运行，则等待超时来清理它

---

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

---

这里有一篇关于这个主题的好文章：

transitionstart

将使它变得简单。。。如果使用JS开始转换，那么可以检查当前值是否与转换到的值相同