确定元素是否将通过 CSS3 过渡进行动画处理

Question

我需要一个轻量级的解决方案来确定当特定类应用于其父级时是否有任何元素会动画（使用任何animatable property）。

following code 设置了一个元素，当<div id="parent"> 被赋予step1 类时，该元素将产生动画效果。

<div id="parent">
    <div class="box">Box</div>
</div>

.box {
  border: red solid 1px;
  height: 100px;
  width: 100px;
  transition-duration: 1s;
  transition-property: transform;
}

#parent.step1 .box {
  transform: translate(0, 100px);
}

在文档准备好后，我需要确定当元素被赋予step1、step2 等类时是否会生成动画。我目前的解决方案如下：

1. 克隆父元素
2. 获取所有以 JSON 格式应用于子元素的 CSS 属性
3. 将 JSON 属性转换为单个字符串
4. 将step1的类添加到父类
5. 重复第 2 步和第 3 步，再次在字符串中获取孩子的属性
6. 比较字符串 - 如果字符串不同（属性已更改）并且元素受制于 transition-duration，我可以假设会发生转换。

当前的解决方案有效，但性能很差。获取元素的所有 CSS 属性包括遍历每个属性并获取其计算值。更重要的是，我希望能够确定是否有许多元素会生成动画。我已经使用由 30 个元素组成的父元素进行了测试，当前的解决方案大约需要 3 秒才能执行（因此显然根本不是解决方案）。

请注意，多个类名将应用于父级（step1、step2 等），并且我已将transition-duration 全局应用于.box。这意味着我不能仅仅根据元素的 transition-duration 来确定元素是否会进行动画处理，因为它可以拥有 transition-duration 但还没有过渡。

为了使潜在的解决方案发挥作用，我不想限制 CSS 的编写方式。如果在#parent.step1 .box {} 下指定了transition-duration，则查看元素以查看它是否具有transition-duration 将起作用，但不是这样，transition-duration 全局指定给任何.box。

最后，获取样式表并直接从中读取也不是一种选择。这增加了使用正则表达式时的复杂性，并且由于跨域策略等原因，样式表不能总是被检索。

更新：我还尝试将5ms 的transition-duration 应用于元素，设置transitionend 事件，然后将step1 的类应用于父元素。为5ms 运行一个计时器，直到将下一个step2 类应用于父级。如果元素的 5ms 转换在计时器启动并应用下一个类之前完成，我知道它属于哪个步骤。这个尝试的解决方案的问题是，因为我正在使用如此短的时间段，所以计时器是不可靠的。即使我让计时器每隔10ms 运行一次，元素有时仍可能需要更长的时间才能完成过渡。

Answer 1

为什么不直接使用像Modernizr 这样的特征检测工具来检查浏览器是否支持transform 属性？您可以对其进行自定义以仅检测您想了解的功能，并且在页面加载后，您只需检查html 是否有特定的类即可知道您是否可以使用某个功能。