transition
介绍
用于设置元素过渡动画效果，是transition-property、transition-duration、transition-timing-function、transition-delay的简写属性。
标准化语法
transition: <transition-property> || <transition-duration> || <transition-timing-function>
|| <transition-delay>;
1
2
2
样例：
/* Apply to 1 property */
/* property name | duration */
transition: background-color 4s;
/* property name | duration | delay */
transition: opacity 4s 1s;
/* property name | duration | easing function */
transition: background-color 4s ease-in-out;
/* property name | duration | easing function | delay */
transition: background-color 4s ease-in-out 1s;
/* Apply to 2 properties */
transition: background-color 4s, opacity 4s;
/* Apply to all changed properties */
transition: all 0.5s ease-out;
/* Clear all transition animation.*/
transition: none;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
与 Web 的区别
目前仅支持 transition-property 中的属性。
扩展阅读
注意事项
- 注意写法有顺序，如果需要设置延迟时间，需将前三个属性都写出来。
- 如果是动态设置的动画属性，需要在节点标记
flatten="false"属性 - 如果 iOS 显示效果不符合预期，在节点标记
implicit-animation="false"属性