transition-property

transition-property 指定应用过渡属性的名称。

uni-app x 兼容性

Web	Android	Android(Vapor)	iOS	iOS(Vapor)	HarmonyOS	HarmonyOS(Vapor)
4.0	3.9	5.21	4.11	5.11	4.61	5.0

App平台拍平（flatten）兼容性

Android(Vapor)	iOS(Vapor)	HarmonyOS(Vapor)
x	x	x

语法

transition-property: none | <single-transition-property>#;

示例源码如下，请查看 pre > code 标签中的内容

transition-property: none | <single-transition-property>#;

值限制

• enum

transition-property 的属性值

名称	兼容性	描述
all	Web Android Android(Vapor) iOS iOS(Vapor) HarmonyOS HarmonyOS(Vapor) 4.0 4.13 5.21 4.13 5.11 4.61 5.0	所有可被动画的属性都表现出过渡动画。
none	Web Android Android(Vapor) iOS iOS(Vapor) HarmonyOS HarmonyOS(Vapor) 4.0 4.13 5.21 4.13 5.11 4.61 5.0	没有过渡动画。
width	Web Android Android(Vapor) iOS iOS(Vapor) HarmonyOS HarmonyOS(Vapor) 4.0 3.9 5.21 4.11 5.11 4.61 5.0	控制宽度属性的过渡效果
height	Web Android Android(Vapor) iOS iOS(Vapor) HarmonyOS HarmonyOS(Vapor) 4.0 3.9 5.21 4.11 5.11 4.61 5.0	控制高度属性的过渡效果
margin	Web Android Android(Vapor) iOS iOS(Vapor) HarmonyOS HarmonyOS(Vapor) 4.0 3.9 5.21 4.11 5.11 4.61 5.07	控制外边距属性的过渡效果
margin-top	Web Android Android(Vapor) iOS iOS(Vapor) HarmonyOS HarmonyOS(Vapor) 4.0 3.9 5.21 4.11 5.11 4.61 5.07	控制上外边距属性的过渡效果
margin-bottom	Web Android Android(Vapor) iOS iOS(Vapor) HarmonyOS HarmonyOS(Vapor) 4.0 3.9 5.21 4.11 5.11 4.61 5.07	控制下外边距属性的过渡效果
margin-left	Web Android Android(Vapor) iOS iOS(Vapor) HarmonyOS HarmonyOS(Vapor) 4.0 3.9 5.21 4.11 5.11 4.61 5.07	控制左外边距属性的过渡效果
margin-right	Web Android Android(Vapor) iOS iOS(Vapor) HarmonyOS HarmonyOS(Vapor) 4.0 3.9 5.21 4.11 5.11 4.61 5.07	控制右外边距属性的过渡效果
left	Web Android Android(Vapor) iOS iOS(Vapor) HarmonyOS HarmonyOS(Vapor) 4.0 3.9 5.21 4.11 5.11 4.61 5.0	控制左侧位置属性的过渡效果
right	Web Android Android(Vapor) iOS iOS(Vapor) HarmonyOS HarmonyOS(Vapor) 4.0 3.9 5.21 4.11 5.11 4.61 5.0	控制右侧位置属性的过渡效果
top	Web Android Android(Vapor) iOS iOS(Vapor) HarmonyOS HarmonyOS(Vapor) 4.0 3.9 5.21 4.11 5.11 4.61 5.0	控制顶部位置属性的过渡效果
bottom	Web Android Android(Vapor) iOS iOS(Vapor) HarmonyOS HarmonyOS(Vapor) 4.0 3.9 5.21 4.11 5.11 4.61 5.0	控制底部位置属性的过渡效果
padding	Web Android Android(Vapor) iOS iOS(Vapor) HarmonyOS HarmonyOS(Vapor) 4.0 3.9 5.21 4.11 5.11 4.61 5.07	控制内边距属性的过渡效果
padding-left	Web Android Android(Vapor) iOS iOS(Vapor) HarmonyOS HarmonyOS(Vapor) 4.0 3.9 5.21 4.11 5.11 4.61 5.07	控制左内边距属性的过渡效果
padding-right	Web Android Android(Vapor) iOS iOS(Vapor) HarmonyOS HarmonyOS(Vapor) 4.0 3.9 5.21 4.11 5.11 4.61 5.07	控制右内边距属性的过渡效果
padding-top	Web Android Android(Vapor) iOS iOS(Vapor) HarmonyOS HarmonyOS(Vapor) 4.0 3.9 5.21 4.11 5.11 4.61 5.07	控制上内边距属性的过渡效果
padding-bottom	Web Android Android(Vapor) iOS iOS(Vapor) HarmonyOS HarmonyOS(Vapor) 4.0 3.9 5.21 4.11 5.11 4.61 5.07	控制下内边距属性的过渡效果
opacity	Web Android Android(Vapor) iOS iOS(Vapor) HarmonyOS HarmonyOS(Vapor) 4.0 3.9 5.21 4.11 5.11 4.61 5.0	控制透明度属性的过渡效果
background-color	Web Android Android(Vapor) iOS iOS(Vapor) HarmonyOS HarmonyOS(Vapor) 4.0 3.9 5.21 4.11 5.11 4.61 5.0	控制背景颜色属性的过渡效果
border-color	Web Android Android(Vapor) iOS iOS(Vapor) HarmonyOS HarmonyOS(Vapor) 4.0 3.9 5.21 4.11 5.11 4.61 5.0	控制边框颜色属性的过渡效果
border-top-color	Web Android Android(Vapor) iOS iOS(Vapor) HarmonyOS HarmonyOS(Vapor) 4.0 3.9 5.21 4.11 5.11 4.61 5.0	控制上边框颜色属性的过渡效果
border-bottom-color	Web Android Android(Vapor) iOS iOS(Vapor) HarmonyOS HarmonyOS(Vapor) 4.0 3.9 5.21 4.11 5.11 4.61 5.0	控制下边框颜色属性的过渡效果
border-left-color	Web Android Android(Vapor) iOS iOS(Vapor) HarmonyOS HarmonyOS(Vapor) 4.0 3.9 5.21 4.11 5.11 4.61 5.0	控制左边框颜色属性的过渡效果
border-right-color	Web Android Android(Vapor) iOS iOS(Vapor) HarmonyOS HarmonyOS(Vapor) 4.0 3.9 5.21 4.11 5.11 4.61 5.0	控制右边框颜色属性的过渡效果
transform	Web Android Android(Vapor) iOS iOS(Vapor) HarmonyOS HarmonyOS(Vapor) 4.0 3.9 5.21 4.11 5.11 4.61 5.0	控制变换属性的过渡效果

App平台

从 HBuilderX4.11 版起，默认值调整为all。HBuilderX4.11 以下版本，默认值为none。

默认值

平台	默认值
uvue-app	all
uvue-web	all

注意：W3C 默认值为：all

参见

• MDN Reference
• 相关 Bug