HTML DOM Style transition 属性

夜幕星河

Style transition 属性

把鼠标指针悬停在 div 元素上,它的外观会逐渐改变:

document.getElementById("myDIV").style.transition="all 2s";


定义和用法

transition 属性是一个速记属性,用于设置四个过渡属性:

transitionProperty、 transitionDuration、 transitionTimingFunction 和 transitionDelay.

注意:请始终设置 transitionDuration 属性,否则持续时间为 0,就不会产生过渡效果。


浏览器支持

HTML DOM Style transition 属性 HTML DOM Style transition 属性 HTML DOM Style transition 属性 HTML DOM Style transition 属性 HTML DOM Style transition 属性

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。

Safari 支持另一个可替代该属性的属性,即 WebkitTransition 属性。

注意:Internet Explorer 9 及其之前的版本不支持 transition 属性。

语法

返回 transition 属性:

	object.style.transition 

设置 transition 属性:

	object.style.transition="property duration timing-function delay|initial|inherit"

属性值

描述
transitionProperty 规定应用过渡效果的 CSS 属性的名称。
transitionDuration 规定完成过渡效果需要多少秒或毫秒。
transitionTimingFunction 规定过渡效果的速度曲线。
transitionDelay 定义过渡效果何时开始。
initial 设置该属性为它的默认值。请参阅 initial
inherit 从父元素继承该属性。请参阅 inherit

技术细节

默认值: all 0 ease 0
返回值: 字符串,表示元素的 transition 属性。
CSS 版本 CSS3


版权声明:本页面内容旨在传播知识,为用户自行发布,若有侵权等问题请及时与本网联系,我们将第一时间处理。E-mail:284563525@qq.com

目录[+]

取消
微信二维码
微信二维码
支付宝二维码