前端課程——過渡
- 2020 年 4 月 9 日
- 筆記
過渡
什麼是過渡
此屬性同樣存在瀏覽器兼容問題：
/* WebKit引擎的瀏覽器（Chrome、Safari、Opera） */ -webkit-transition : <single-transition>; /* Gecko引擎的瀏覽器（Firefox） */ -moz-transition : <single-transition>; /* Trident引擎的瀏覽器（IE 10+） */ -ms-transition : <single-transition>; /* Presto引擎的瀏覽器（Opera） */ -o-transition : <single-transition>;
過渡子屬性
-
ltransition-property屬性：用於定義過渡效果中的樣式屬性名稱。 -
ltransition-duration屬性：用於定義過渡效果執行動畫的時長。 -
ltransition-timing-function屬性：用於定義過渡效果計算的函數。-
ease：默認值，元素樣式從初始狀態過渡到終止狀態時速度由快到慢。 -
linear：元素樣式從初始狀態過渡到終止狀態時速度是勻速。 -
ease-in：元素樣式從初始狀態過渡到終止狀態時速度由慢到快。 -
ease-out：元素樣式從初始狀態過渡到終止狀態時速度由快到慢。 -
ease-in-out：元素樣式從初始狀態過渡到終止狀態時，先加速再減速。 -
step：將整個過渡過程劃分成相同大小的間隔，每個間隔是相等的。
-
-
ltransition-delay屬性：用於定義過渡效果開始的延遲時間。
觸發過渡的方式
成功設置過渡的條件
- 具有一個CSS屬性在過渡效果中的開始樣式和最終樣式
- 通過transition-property指定過渡效果要執行的樣式屬性名稱
- 通過transition-duration 設置過渡效果執行的時長
- 偽類觸發過渡
- 使用子屬性 各屬性之間（多個屬性時）用逗號分隔例如
transition-property: background-color,width;每個屬性與時間一一對應，如果指定的時長的個數小於屬性的個數，則時長列表會被重複，以與屬性的個數匹配；如果指定的時長的個數大於屬性的個數，則時長列表會被裁減。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 200px; height: 200px; border: 1px solid gray; /* 設置執行過渡效果開始的樣式 */ background-color: lightcoral; /* 用來執行過渡效果的樣式屬性 */ transition-property: background-color,width; /* */ transition-duration: 1s,2s; } /* 觸發過渡效果的方式 */ .box:hover{ /* 設置執行過度效果最終的樣式 */ background-color: lightyellow; width: 300px; } </style> </head> <body> <div class="box"></div> </body> </html> - 使用合屬性 用逗號分隔每個過渡。例如
transition: width 2s linear,height 2s linear;表示2秒勻速過渡. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 200px; height: 200px; background: lightcoral; transition: width 2s,height 2s; } .box:hover{ width: 400px; height: 400px; } </style> </head> <body> <div class="box"></div> </body> </html>
- 使用子屬性 各屬性之間（多個屬性時）用逗號分隔例如
- JavaScript觸發過渡 推薦使用css
檢測過渡是否完成
須使用JavaScript使用.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>transitionEnd事件</title> <style> .box { width: 200px; height: 200px; border: 1px solid gray; background: lightcoral; transition-property: background; transition-duration: 2s; } .box:hover { background: lightyellow; } </style> </head> <body> <div id="box" class="box"></div> <script> var box = document.getElementById('box'); box.addEventListener('transitionend', function () { console.log('這個過渡執行完畢了......') }) </script> </body> </html>
