Transition 所支持的css属性
来源:www.cnblogs.com 更新时间:2023-05-25 21:55
transition-property是用来指定当元素其中一个属性改变时执行transition效果: 所支持的属性类型如下:
color
: 通过红、绿、蓝和透明度组件变换(每个数值处理)如:background-color,border-color
,color
,outline-color
等css属性;length
: 真实的数字 如:word-spacing
,width
,vertical-align
,top
,right
,bottom
,left
,padding
,outline-width
,margin
,min-width
,min-height
,max-width
,max-height
,line-height
,height
,border-width
,border-spacing
,background-position
等属性;percentage
:真实的数字 如:word-spacing
,width
,vertical-align
,top
,right
,bottom
,left
,padding
,outline-width
,margin
,min-width
,min-height
,max-width
,max-height
,line-height
,height
,border-width
,border-spacing
,background-position
等属性;integer
离散步骤(整个数字),在真实的数字空间,以及使用floor()转换为整数时发生 如:outline-offset
,z-index
等属性;number
真实的(浮点型)数值,如:zoom
,opacity
,font-weight
,等属性;transform
listrectangle
:通过x, y, width 和 height(转为数值)变换,如:crop
visibility
: 离散步骤,在0到1数字范围之内,0表示“隐藏”,1表示完全“显示”,如:visibility
shadow
: 作用于color, x, y 和 blur(模糊)属性,如:text-shadow
gradient
: 通过每次停止时的位置和颜色进行变化。它们必须有相同的类型(放射状的或是线性的)和相同的停止数值以便执行动画,如:background-image
- paint server (SVG): 只支持下面的情况:从
gradient
到gradient
以及color
到color
,然后工作与上面类似 - space-separated list of above:如果列表有相同的项目数值,则列表每一项按照上面的规则进行变化,否则无变化
- a shorthand property: 如果缩写的所有部分都可以实现动画,则会像所有单个属性变化一样变化
上一篇:vue数组和对象更新 检测变化的注意事项 下一篇:动态添加组件的两种实现