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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。