在所有元素上设置全局背景 CSS3 过渡有什么缺点吗？答案

【问题标题】：Is there any disadvantage of setting global background CSS3 transition on all elements?在所有元素上设置全局背景 CSS3 过渡有什么缺点吗？
【发布时间】：2015-06-27 07:42:39
【问题描述】：

我已经开始在我的一个项目中使用 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;
}

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

使用过多的过渡会导致浏览器卡顿吗？或者有什么特殊情况我应该一起禁用转换？

【问题讨论】：

标签： css cross-browser css-transitions

【解决方案1】：

当动画实际发生时，转换的成本肯定很高，但我认为除此之外几乎没有影响。

通用选择器并不像大多数人想象的那么慢。将样式应用于永远不会使用这些样式的元素是一种浪费，但这种浪费并不能弥补。就是说，最好具体确定要应用过渡的元素，但在这种情况下，如果你能证明这样做是合理的，我认为应用全局过渡听起来很公平。

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

不管怎样，现代浏览器都为许多事情提供了硬件加速（IE9+ 几乎一切）；再加上现代硬件，转换几乎没有任何明显的性能影响，至少在台式机和笔记本电脑上是这样。移动硬件（智能手机和平板电脑）可能会受到更多限制，但如果您使用响应式设计，则可以通过 @media 切换轻松关闭过渡。

这些只是我的两分钱。我自己没怎么玩过转场，但总结一下：在应用转场时我宁愿具体一点，但是伤害普遍应用它们只要你知道你在做。

当然，您始终可以通过使用您使用的任何选择器创建新规则并提供transition-property: none 来禁用某些元素的过渡。

【讨论】：

【解决方案2】：

您需要在运行自动测试时禁用所有转换。禁用过渡将通过停止使用 BrowserDriver.wait() 来帮助您。运行会更快！

【讨论】：