HTML | DOM 样式 transitionProperty 属性

HTML DOM 中的Style transitionProperty属性用于设置过渡效果的 CSS 属性名称。当用户将鼠标悬停在元素上时可能会发生这种情况。它返回元素的transitionProperty属性。
句法：

• 它返回 transitionProperty 属性。

object.style.transitionProperty

• 它用于设置 transitionProperty 属性。

object.style.transitionProperty = "none | all | property | 
initial | inherit"

属性值：

• none：过渡效果不会应用于任何元素。
• all：所有元素都会有过渡效果，默认值。
• property：用于为过渡效果的 CSS 属性名称指定逗号分隔值。
• 初始：将 transitionProperty 属性设置为其默认值。
• 继承：此属性从其父元素继承。

返回值：它返回一个表示元素的 transitionProperty 属性的字符串。
示例 1：

html

 

    DOM Style transitionProperty Property 
    
        #gfg {
            border: 3px solid blue;
            background-color: green;
            width: 100px;
            height: 50px;
            -webkit-transition: all 2s;
            <!-- for safari 3.1 to 6.0-->
          transition: all 2s;
        }
         
        #gfg:hover {
            background-color: green;
            width: 200px;
            height: 100px;
        }
    

 

 
    
        
                GeeksForGeeks
            
        DOM Style transitionProperty  Property 
       
        
          A Computer science portal for geeks
       
 
        
            Click
        
 
        
            function geeks() {
                document.getElementById(
                  "gfg").style.transitionProperty = "all";
               
                //  for safari 3.1 to 6.0
                document.getElementById(
                  "gfg").style.WebkitTransitionProperty = "all";
            }
        
    

 

输出：

• 悬停前：

• 悬停后：

示例 2：

html

 

    DOM Style transitionProperty Property 
    
        #gfg {
            border: 3px solid blue;
            background-color: green;
            width: 100px;
            height: 50px;
            -webkit-transition: all 2s;
            <!-- for safari -->
            transition: all 2s;
        }
         
        #gfg:hover {
            background-color: green;
            width: 200px;
            height: 100px;
        }
    

 

 
    
        
                GeeksForGeeks
            
        DOM Style transitionProperty  Property 
       
        
          A Computer science portal for geeks
      
 
        
            Click
        
 
        
            function geeks() {
               
                document.getElementById(
                  "gfg").style.transitionProperty =
                  "width, height";
               
                document.getElementById(
                  "gfg").style.WebkitTransitionProperty =
                  "width, height";
            }
        
    

 

输出：

• 悬停前：

• 悬停后：

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

• 谷歌浏览器 26.0
• 浏览器 10.0
• 火狐 16.0
• 歌剧 12.1
• 苹果 Safari 6.1