在所有元素上设置全局背景CSS3过渡是否有任何缺点？

Question

我开始在我的一个项目中使用CSS3过渡，我发现我基本上希望在悬停时改变它的每个元素都有背景颜色的过渡。

如果我做的话

a {
  transition-property: background;
  transition-duration: 0.15s;
  transition-timing-function: ease-out;
  transition-delay: 0;
}

甚至

* {
  transition-property: background;
  transition-duration: 0.15s;
  transition-timing-function: ease-out;
  transition-delay: 0;
}

有任何缺点吗？因为它不会影响不改变背景颜色的元素，所以我想到的唯一问题是它会对浏览器产生一些影响。

可以使用过多的转换导致浏览器滞后吗？或者是否有任何特殊情况我应该一起禁用转换？

Answer 1

当动画实际发生时，过渡将是代价高昂的，但我认为除此之外没什么影响。

通用选择器并不像大多数人那样慢。对于永远不会使用这些样式的元素来说，应用样式是一种浪费，但浪费并不是很多。也就是说，对于要应用转换的元素，具体总是最好的，但在这种情况下，我认为应用全局转换听起来很公平，如果你能证明这样做的话。

我认为您必须注意不要在过渡属性上对太多元素应用更改。例如，在您的情况下，请记住:hover状态适用于元素及其所有祖先（无论如何，在具有明确定义的:hover行为的桌面浏览器中）。

对于它的价值，现代浏览器为许多事情提供硬件加速（IE9 +几乎一切）;再加上现代硬件，转换几乎没有明显的性能影响，至少在台式机和笔记本电脑上如此。移动硬件（智能手机和平板电脑）可能更受限制，但如果您使用响应式设计，则可以通过@media切换轻松关闭转场。

这些只是我的两分钱。我自己并没有过多地使用转换，但总结一下：我宁愿在应用转换时具体说明，但只要你知道什么，它就不会伤害来普遍应用它们你正在做。

当然，您可以通过使用您使用的任何选择器制作新规则并为其指定transition-property: none来禁用某些元素的转场。

Answer 2

运行自动测试时，您需要禁用所有转换。禁用转换将通过停止使用BrowserDriver.wait（）来帮助您。并且运​​行会更快！