HTML Style transition用法及代码示例

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

用法

为了返回transition属性：
```
object.style.transition
```

对于设置过渡属性：

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

属性值：

值	描述
transitionProperty	用于过渡效果的CSS属性的名称。
transitionDuration	完成过渡需要花费多少时间
transitionTimingFunction	过渡速度
transitionDelay	过渡起点
initial	设为默认值
inherit	从其父元素继承

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

<!DOCTYPE html> 
<html> 
  
<head> 
    <!--this style tag defines two CSS 
    the first one is the CSS define for 
    the button whose id is myDiv. first 
    css will show when the page is load. 
    second css is used when someone  
    hover the mouse on the Div -->
    <style> 
        #myDIV { 
            border:1px solid black; 
            background-color:#0f9d58; 
            width:220px; 
            height:100; 
  
        } 
          
        #myDIV:hover { 
            background-color:#228B22; 
            width:500px; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
    <div id="myDIV"> 
        <h1>GeeksForGeeks</h1> 
    </div> 
    <button onclick="myFunction()">submit</button> 
    <script> 
        // 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"; 
        } 
    </script> 
</center> 
</body> 
  
</html>

输出

悬停之前：
在单击提交后将鼠标悬停时

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

none:没有属性会产生交易效果
all:这是所有属性将获得事务效果的默认值。
initial:将此属性设置为其默认值。
inherit:从其父元素继承此属性。

支持的浏览器：

HTML | DOM样式转换属性

谷歌浏览器
Edge
Firefox
Opera
苹果Safari

相关用法

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