在所有元素上设置全局背景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.