HTML | DOM 样式过渡属性

HTML DOM 样式属性用于更改任何 DIV 元素的外观。只要鼠标悬停在该元素上，它就会改变外观。

句法

• 返回过渡属性：

  object.style.transition

• 设置过渡属性：

  object.style.transition = "property duration timing-function 
  delay|initial|inherit"

属性值：

Value	Description
transitionProperty	Name of CSS property for transition effect.
transitionDuration	How much time is taken to complete the transition
transitionTimingFunction	Speed of transition
transitionDelay	Starting point of transition
initial	Set to default value
inherit	Inherit from its parent element

示例：在此示例中，我们正在创建一个 div 标签，其 CSS 定义在 style 标签中，当您在单击提交按钮后将鼠标悬停在 div 标签上时，CSS 将从 myDIV CSS 更改为 myDIV:hover CSS。

  

    
    
        #myDIV {
            border: 1px solid black;
            background-color: #0f9d58;
            width: 220px;
            height: 100;
  
        }
          
        #myDIV:hover {
            background-color: #228B22;
            width: 500px;
        }
    

  

    
    
        GeeksForGeeks
    
    submit
    
        // this function will find a button whose id
        // is myDIV and assign its new css according 
        // to the css define in css section
        function myFunction() {
            document.getElementById(
            "myDIV").style.WebkitTransition = "width 3s";
          
            // here all means that the transition
            // is used for all property.
          
            // 2s means that hover effect will complete
            // in 2s its the transaction duration time.
            document.getElementById(
            "myDIV").style.transition = "width 3s";
        }
    


  
                    

输出

• 悬停前：
  
• 点击提交后悬停鼠标
  

注意transitionDuration 只能是非负数，不能为零，否则交易效果不会显示。

我们可以使用以下 css 属性代替所有属性：
• none：没有属性获得交易效果
• all：这是所有属性都会得到交易效果的默认值。
• 初始：将此属性设置为其默认值。
• 继承：从其父元素继承此属性。

支持的浏览器： HTML支持的浏览器 |下面列出了DOM 样式过渡属性：
• 谷歌浏览器
• 边缘
• 火狐
• 歌剧
• 苹果Safari