当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


HTML Style transitionDuration用法及代码示例


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


相关用法


注:本文由纯净天空筛选整理自ChinkitManchanda大神的英文原创作品 HTML | DOM Style transitionDuration Property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。