为了账号安全,请及时绑定邮箱和手机立即绑定

CSS3过渡:“过渡:全部”是否比“过渡:x”慢?

/ 猿问

CSS3过渡:“过渡:全部”是否比“过渡:x”慢?

慕侠2389804 2019-11-15 21:07:56

我对css3 transition属性的渲染速度有疑问。


假设我有许多要素:


div, span, a {transition: all}


div {margin: 2px}

span {opacity: .5}

a:hover {background-position: left top}


div:hover {margin: -100px}

span:hover {opacity: 1}

a:hover {background-position: -5px top}

使用一个声明将所有这些元素的所有转换作为目标更有效div, span, a {transition: all}。但是我的问题是:针对每个元素的特定过渡属性,在动画渲染的平滑度和快速度方面是否“更快”?例如:


div {margin: 2px; transition: margin .2s ease-in}

span {opacity: .5; transition: opacity .2s ease-in}

a {background-position: left top; transition: background .2s ease-in}


div:hover {margin: -100px}

span:hover {opacity: 1}

a:hover {background-position: -5px top}

我这样做的逻辑是,即使一个元素只有一个属性,css的“引擎”是否必须搜索“所有”过渡属性,也可能会减慢速度。


有谁知道是这样吗?谢谢!


查看完整描述

3 回答

?
慕码人8056858

是的,使用transition: all可能会导致性能上的重大缺陷。在很多情况下,浏览器会查看是否需要进行过渡,即使用户看不到它,例如颜色变化,尺寸变化等。


我能想到的最简单的示例是:http : //dabblet.com/gist/1657661-尝试更改缩放级别或字体的大小,您会看到所有内容都变成了动画。当然不可能很多此类用户交互,但是可能会发生一些界面更改,从而导致某些块中的重排和重新绘制,这可能会告诉浏览器尝试对这些更改进行动画处理。


因此,一般而言,建议您不要使用,transition: all而应使用直接转换。


all过渡还有其他问题,例如页面加载时的动画飞溅,首先是渲染块的初始样式,然后将样式应用于动画。在很多情况下,这不是您想要的东西:)


查看完整回答
反对 回复 2019-11-15
?
桃花长相依

我一直all在需要为多个规则设置动画的情况下使用。例如,如果我想更改color&background-coloron :hover。


但是事实证明,您可以将多个规则定位为过渡条件,因此您无需诉诸该all设置。


.nav a {

  transition: color .2s, text-shadow .2s;

}


查看完整回答
反对 回复 2019-11-15
?
宝慕林4294392

这实际上不是对原始问题的答案。是的,您可能会意外地转换原本不想设置动画的内容,但是OP询问“所有”规则是否会导致任何性能下降,前提是未触发任何意外转换。

查看完整回答
反对 回复 2019-11-15

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信