當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文


HTML Style transitionDelay用法及代碼示例


HTML DOM中的transitionDelay屬性用於指定開始執行過渡的時間,以秒或毫秒為單位。延遲是指開始過渡效果之前要等待的時間。

用法:

  • 它返回transitionDelay屬性。
    object.style.transitionDelay
  • 設置transitionDelay屬性。
    object.style.transitionDelay = "time|initial|inherit"

屬性值:


  • time:它指定開始過渡動畫的時間長度(以秒或毫秒為單位)。
    用法:
    object.style.transitionDelay = "time";

    例:

    <!DOCTYPE html> 
    <html> 
          
    <head> 
        <title> 
            HTML DOM Style transitionDelay Property 
        </title> 
          
        <!-- CSS property for transition animation -->
        <style>  
            #GFG { 
                border:1px solid black; 
                background-color:white; 
                width:250px; 
                height:200px; 
                overflow:auto; 
                -webkit-transition:all 3s; 
                transition:all 3s; 
                text-align:center; 
            } 
              
            #GFG:hover { 
                background-color:green; 
                width:300px; 
                height:100px; 
                 
                text-align:center; 
            } 
        </style> 
    </head> 
      
    <body> 
      
        <button onclick="myGeeks()"> 
            Click Here! 
        </button> 
          
        <br><br> 
          
        <div id = "GFG"> 
            <h1>GeeksforGeeks</h1> 
        </div> 
          
        <!-- script for transition delay -->
        <script> 
            function myGeeks() { 
                document.getElementById("GFG").style.WebkitTransitionDelay 
                        = "3s";  
                          
                document.getElementById("GFG").style.transitionDelay 
                        = "3s";      
            } 
        </script> 
    </body> 
      
    </html>                    

    輸出:
    在單擊按鈕之前:

    單擊按鈕後:轉換延遲:3秒

  • initial:它將transitionDelay屬性設置為其默認值。
    用法:
    object.style.transitionDelay = "initial";

    例:

    <!DOCTYPE html> 
    <html> 
          
    <head> 
        <title> 
            HTML DOM Style transitionDelay Property 
        </title> 
          
        <!-- CSS property for transition animation -->
        <style>  
            #GFG { 
                border:1px solid black; 
                background-color:white; 
                width:250px; 
                height:200px; 
                overflow:auto; 
                -webkit-transition:all 3s; 
                transition:all 3s; 
                text-align:center; 
            } 
              
            #GFG:hover { 
                background-color:green; 
                width:300px; 
                height:100px; 
                 
                text-align:center; 
            } 
        </style> 
    </head> 
      
    <body> 
      
        <button onclick="myGeeks()"> 
            Click Here! 
        </button> 
          
        <br><br> 
          
        <div id = "GFG"> 
            <h1>GeeksforGeeks</h1> 
        </div> 
          
        <!-- script for transition delay -->
        <script> 
            function myGeeks() { 
                document.getElementById("GFG").style.WebkitTransitionDelay 
                        = "initial";  
                          
                document.getElementById("GFG").style.transitionDelay 
                        = "initial";      
            } 
        </script> 
    </body> 
      
    </html>                            

    輸出:
    在單擊按鈕之前:

    單擊按鈕後:轉換延遲:0秒。因為默認的轉換延遲是0秒。

  • inherit:transitionDelay屬性是從其父級繼承的。
    用法:
    object.style.transitionDelay = "inherit";

    範例3:

    <!DOCTYPE html> 
    <html> 
          
    <head> 
        <title> 
            HTML DOM Style transitionDelay Property 
        </title> 
          
        <!-- CSS property for transition animation -->
        <style>  
            #GFG { 
                border:1px solid black; 
                background-color:white; 
                width:250px; 
                height:200px; 
                overflow:auto; 
                -webkit-transition:all 3s; 
                transition:all 3s; 
                text-align:center; 
            } 
              
            #main { 
                transition-delay:2s; 
                -webkit-transition-delay:2s 
            } 
            #GFG:hover { 
                background-color:green; 
                width:300px; 
                height:100px; 
                 
                text-align:center; 
            } 
        </style> 
    </head> 
      
    <body> 
      
        <button onclick="myGeeks()"> 
            Click Here! 
        </button> 
          
        <br><br> 
          
        <div id = "main"> 
            <div id = "GFG"> 
                <h1>GeeksforGeeks</h1> 
            </div> 
        </div> 
          
        <!-- script for transition delay -->
        <script> 
            function myGeeks() { 
                document.getElementById("GFG").style.WebkitTransitionDelay 
                        = "inherit";  
                          
                document.getElementById("GFG").style.transitionDelay 
                        = "inherit";      
            } 
        </script> 
    </body> 
      
    </html>                    

    輸出:
    在單擊按鈕之前:

    單擊按鈕後:轉換延遲:2秒。因為父類包含2秒的轉換延遲。

返回值:它返回一個表示元素的transitionDelay屬性的字符串值。

支持的瀏覽器:下麵列出了DOM transitionDelay屬性支持的瀏覽器:

  • 穀歌瀏覽器26.0
  • Internet Explorer 10.0
  • Firefox 16.0
  • Safari 6.1、3.1 WebkitTransitionDelay
  • Opera 12.1


相關用法


注:本文由純淨天空篩選整理自riarawal99大神的英文原創作品 HTML | DOM Style transitionDelay Property。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。