HTML DOM中的Style transitionDuration属性用于设置或返回完成过渡效果的时间长度(以秒或毫秒为单位)。
用法:
- 返回transitionDuration属性:
object.style.transitionDuration
- 设置transitionDuration:
object.style.transitionDuration = "time|initial|inherit"
属性值:
- time:用于指定完成过渡效果所需的时间。默认值为0(无过渡效果)。
- initial:将元素设置为其初始位置。
- inherit:它用于从其父元素设置属性。
例:设置transitionDuration属性。
<!DOCTYPE html> <html> <head> <title> HTML | DOM Style transitionDuration Property </title> <style> #element { width:100px; height:70px; background:green; transition-property:width; } #element:hover { width:400px; height:100px; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2>TransitionDuration Property</h2> <p> Move mouse over the green box and it will change! </p> <div id="element"> <h3>transition-duration:5s</h3> </div> <script> function myFunction() { // Set transitionDuration 5 second. document.getElementById( "element").style.transitionDuration = "5s"; } myFunction() </script> </body> </html>
输出:
- 过渡前:
- 过渡后:
支持的浏览器:HTML支持的浏览器|下面列出了DOM样式transitionDuration属性:
- 谷歌浏览器26
- Internet Explorer 10
- Firefox 16
- Opera 12.1
- Safari 6.1
相关用法
- HTML Style right用法及代码示例
- HTML Style top用法及代码示例
- HTML Style textAlign用法及代码示例
- HTML Style borderRight用法及代码示例
- HTML Style borderLeft用法及代码示例
- HTML Style wordSpacing用法及代码示例
- HTML Style height用法及代码示例
- HTML Style whiteSpace用法及代码示例
- HTML Style textDecorationLine用法及代码示例
- HTML Style cssFloat用法及代码示例
- HTML Style animationDirection用法及代码示例
- HTML Style columnRuleStyle用法及代码示例
- HTML Style display用法及代码示例
- HTML Style transformStyle用法及代码示例
- HTML Style visibility用法及代码示例
注:本文由纯净天空筛选整理自ChinkitManchanda大神的英文原创作品 HTML | DOM Style transitionDuration Property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。