HTML | DOM 样式 transitionDelay 属性

HTML DOM 中的 transitionDelay 属性用于指定开始执行过渡的时间（以秒或毫秒为单位）。延迟是指在开始过渡效果之前要等待的时间。

句法：

• 它返回 transitionDelay 属性。

  object.style.transitionDelay

• 它设置 transitionDelay 属性。

  object.style.transitionDelay = "time|initial|inherit"

属性值：

• time：它指定开始过渡动画的时间长度（以秒或毫秒为单位）。
  句法：

  object.style.transitionDelay = "time";

  例子：

        
  
      
          HTML DOM Style transitionDelay Property
      
        
      
       
          #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;
          }
      
  
    
  
    
      
          Click Here!
      
        
      
        
      
          GeeksforGeeks
      
        
      
      
          function myGeeks() {
              document.getElementById("GFG").style.WebkitTransitionDelay
                      = "3s"; 
                        
              document.getElementById("GFG").style.transitionDelay
                      = "3s";     
          }
      
  
    
                      

  输出：
  在点击按钮之前：
  
  单击按钮后：转换延迟：3 秒
  

• 初始：将 transitionDelay 属性设置为其默认值。
  句法：

  object.style.transitionDelay = "initial";

  例子：

        
  
      
          HTML DOM Style transitionDelay Property
      
        
      
       
          #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;
          }
      
  
    
  
    
      
          Click Here!
      
        
      
        
      
          GeeksforGeeks
      
        
      
      
          function myGeeks() {
              document.getElementById("GFG").style.WebkitTransitionDelay
                      = "initial"; 
                        
              document.getElementById("GFG").style.transitionDelay
                      = "initial";     
          }
      
  
    
                              

  输出：
  在点击按钮之前：
  
  单击按钮后：转换延迟：0 秒。因为默认的转换延迟是 0 秒。
  

• 继承： transitionDelay 属性继承自其父级。
  句法：

  object.style.transitionDelay = "inherit";

  示例 3：

        
  
      
          HTML DOM Style transitionDelay Property
      
        
      
       
          #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;
          }
      
  
    
  
    
      
          Click Here!
      
        
      
        
      
          
              GeeksforGeeks
          
      
        
      
      
          function myGeeks() {
              document.getElementById("GFG").style.WebkitTransitionDelay
                      = "inherit"; 
                        
              document.getElementById("GFG").style.transitionDelay
                      = "inherit";     
          }
      
  
    
                      

  输出：
  在点击按钮之前：
  
  单击按钮后：转换延迟：2 秒。因为父类包含转换延迟 2 秒。
  

返回值：它返回一个字符串值，表示元素的 transitionDelay 属性。

支持的浏览器： DOM transitionDelay 属性支持的浏览器如下：

• 谷歌浏览器 26.0
• 浏览器 10.0
• 火狐 16.0
• Safari 6.1、3.1 WebkitTransitionDelay
• 歌剧 12.1