过渡速记属性的正确顺序为

transition: <property> || <duration> || <timing-function> ;


最近,我注意到在Bootstrap中,他们将.carousel-inner类的顺序更改为:

transition: .6s ease-in-out left;


即为:transition: <duration> || <timing-function> || <property>

实际上,无论我们如何安排这三个参数,过渡过程都完全相同。所以问题是

我们可以更改过渡速记属性中参数的顺序吗?参数的顺序真的重要吗?

最佳答案

更新

@ user31782您曾评论过,除非有持续时间和延迟,否则速记转换的顺序可能并不重要。您的推论似乎是正确的:


  Just space-separate all the individual values. The order doesn't matter except when using both duration and delay, they need to be in that order.


尽管这是指动画速记,但从逻辑上讲,这也适用于过渡速记属性:


animationtransition速记属性在功能上非常相似。
Bootstrap正在混合订单,并且仍然有效。

 




您确定级联中没有其他过渡吗?您检查计算的样式了吗?


  请注意,顺序在此属性中的各个项目中很重要:可以将时间解析的第一个值分配给过渡持续时间,将时间解析的第二个值分配给过渡延迟。


如果速记中有多个<single-transition>,并且任何转换的<single-transition-property>都为“ none”,则声明无效。

https://www.w3.org/TR/css3-transitions/#transition-shorthand-property

关于html - 我们可以更改过渡速记属性中参数的顺序吗?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37084691/

10-12 02:24