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类等时是否会生成动画。我目前的解决方案如下：

克隆父元素
将所有 CSS属性应用于子元素作为JSON
将JSON属性转换为单个字符串
将step1的班级添加到家长
重复步骤2和3以再次获取字符串中的子属性
比较字符串 - 如果字符串不同（属性已更改）且元素受transition-duration约束，我可以假设将发生转换。

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

请注意，多个类名称将应用于父级（step1，step2等），并且我已将transition-duration全局应用于.box。这意味着我无法根据具有transition-duration的元素来确定元素是否会动画，因为它可以有transition-duration但尚未转换。

对于可行的解决方案，我不想限制CSS的编写方式。如果在transition-duration下指定transition-duration但未按原样指定#parent.step1 .box {}，那么查看该元素是否有transition-duration可行，并且全局指定.box { {1}}。

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

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

Answer 1

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

确定元素是否通过CSS3过渡动画

1 个答案: