HTML DOM中的transitionDelay屬性用於指定開始執行過渡的時間,以秒或毫秒為單位。延遲是指開始過渡效果之前要等待的時間。
用法:
- 它返回transitionDelay屬性。
object.style.transitionDelay
- 設置transitionDelay屬性。
object.style.transitionDelay = "time|initial|inherit"
屬性值:
- time:它指定開始過渡動畫的時間長度(以秒或毫秒為單位)。
用法:object.style.transitionDelay = "time";
例:
<!DOCTYPE html> <html> <head> <title> HTML DOM Style transitionDelay Property </title> <!-- CSS property for transition animation --> <style> #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; } </style> </head> <body> <button onclick="myGeeks()"> Click Here! </button> <br><br> <div id = "GFG"> <h1>GeeksforGeeks</h1> </div> <!-- script for transition delay --> <script> function myGeeks() { document.getElementById("GFG").style.WebkitTransitionDelay = "3s"; document.getElementById("GFG").style.transitionDelay = "3s"; } </script> </body> </html>
輸出:
在單擊按鈕之前:
單擊按鈕後:轉換延遲:3秒
- initial:它將transitionDelay屬性設置為其默認值。
用法:object.style.transitionDelay = "initial";
例:
<!DOCTYPE html> <html> <head> <title> HTML DOM Style transitionDelay Property </title> <!-- CSS property for transition animation --> <style> #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; } </style> </head> <body> <button onclick="myGeeks()"> Click Here! </button> <br><br> <div id = "GFG"> <h1>GeeksforGeeks</h1> </div> <!-- script for transition delay --> <script> function myGeeks() { document.getElementById("GFG").style.WebkitTransitionDelay = "initial"; document.getElementById("GFG").style.transitionDelay = "initial"; } </script> </body> </html>
輸出:
在單擊按鈕之前:
單擊按鈕後:轉換延遲:0秒。因為默認的轉換延遲是0秒。
- inherit:transitionDelay屬性是從其父級繼承的。
用法:object.style.transitionDelay = "inherit";
範例3:
<!DOCTYPE html> <html> <head> <title> HTML DOM Style transitionDelay Property </title> <!-- CSS property for transition animation --> <style> #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; } </style> </head> <body> <button onclick="myGeeks()"> Click Here! </button> <br><br> <div id = "main"> <div id = "GFG"> <h1>GeeksforGeeks</h1> </div> </div> <!-- script for transition delay --> <script> function myGeeks() { document.getElementById("GFG").style.WebkitTransitionDelay = "inherit"; document.getElementById("GFG").style.transitionDelay = "inherit"; } </script> </body> </html>
輸出:
在單擊按鈕之前:
單擊按鈕後:轉換延遲:2秒。因為父類包含2秒的轉換延遲。
返回值:它返回一個表示元素的transitionDelay屬性的字符串值。
支持的瀏覽器:下麵列出了DOM transitionDelay屬性支持的瀏覽器:
- 穀歌瀏覽器26.0
- Internet Explorer 10.0
- Firefox 16.0
- Safari 6.1、3.1 WebkitTransitionDelay
- Opera 12.1
相關用法
- HTML Style right用法及代碼示例
- HTML Style top用法及代碼示例
- HTML Style textAlign用法及代碼示例
- HTML Style wordSpacing用法及代碼示例
- HTML Style borderLeft用法及代碼示例
- HTML Style borderRight用法及代碼示例
- HTML Style height用法及代碼示例
- HTML Style whiteSpace用法及代碼示例
- HTML Style textDecorationLine用法及代碼示例
- HTML Style opacity用法及代碼示例
- HTML Style columnRuleStyle用法及代碼示例
- HTML Style display用法及代碼示例
- HTML Style transformStyle用法及代碼示例
- HTML Style visibility用法及代碼示例
- HTML Style cssFloat用法及代碼示例
注:本文由純淨天空篩選整理自riarawal99大神的英文原創作品 HTML | DOM Style transitionDelay Property。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。