transition用于實現頁面元素狀態變化時的平滑過渡效果。1.使用transition需指定屬性、持續時間、速度曲線和延遲，語法為transition: Property duration timing-function delay；2.可簡寫或拆分屬性以對不同css屬性設置不同過渡效果；3.transition與animation的區別在于前者用于狀態間簡單過渡，后者通過關鍵幀實現復雜動畫；4.transitionend事件可用于監聽過渡完成；5.實現復雜動畫可通過組合transform等屬性；6.若transition無效，需檢查屬性是否支持、值是否有變化及優先級問題；7.優化性能可用transform和opacity、減少過渡元素、合理使用will-change；8.通過調整timing-function或自定義cubic-bezier曲線可使動畫更自然。
頁面過渡動畫，簡單來說，就是讓頁面元素在狀態改變時，不是“咔”一下變過去，而是有個平滑的過渡效果。transition就是干這個的。
transition屬性允許你定義css屬性值之間平滑過渡的效果。它允許你指定要過渡的css屬性、過渡的持續時間、過渡的速度曲線以及過渡開始之前的延遲。
怎么用transition？
transition的基本語法是：
立即學習“前端免費學習筆記（深入）”；
transition: property duration timing-function delay;
- property: 你想要過渡的CSS屬性，比如background-color、opacity、transform等。 如果你想讓所有屬性都過渡，可以用all。
- duration: 過渡持續的時間，單位是秒(s)或毫秒(ms)，比如0.3s或300ms。
- timing-function: 過渡的速度曲線，決定過渡效果的變化速度。常見的有ease、linear、ease-in、ease-out、ease-in-out。 也可以自定義cubic-bezier曲線。
- delay: 過渡開始前的延遲時間，單位是秒(s)或毫秒(ms)，比如0.1s或100ms。
舉個例子，讓一個div的背景顏色在鼠標懸停時平滑過渡：
<div class="my-div">Hover me</div>
.my-div { width: 100px; height: 100px; background-color: red; transition: background-color 0.3s ease; /* 簡寫形式 */ } .my-div:hover { background-color: blue; }
這段代碼的意思是，當鼠標懸停在.my-div上時，背景顏色從紅色過渡到藍色，過渡時間是0.3秒，速度曲線是ease。
transition屬性拆開寫有什么好處？
雖然可以用簡寫形式，但把transition屬性拆開寫有時候更方便，尤其是在你需要對不同的屬性應用不同的過渡效果時。
比如：
.my-div { width: 100px; height: 100px; background-color: red; opacity: 0.5; transition-property: background-color, opacity; transition-duration: 0.3s, 0.5s; transition-timing-function: ease, linear; transition-delay: 0s, 0.1s; } .my-div:hover { background-color: blue; opacity: 1; }
這樣，背景顏色和透明度的過渡效果就可以分別設置了。 注意，如果你拆開寫，那么每個屬性的值都要對應，比如transition-property里有兩個屬性，那么transition-duration里也要有兩個時間值。
transition和animation有什么區別？
transition和animation都是CSS動畫，但它們的應用場景不太一樣。transition通常用于簡單的狀態過渡，比如hover、focus等。animation則更強大，可以創建復雜的、可重復的動畫效果。
簡單來說，transition是“狀態A到狀態B”的過渡，而animation是“關鍵幀動畫”，可以定義多個關鍵幀，實現更復雜的動畫效果。
transitionend事件是什么？
transitionend事件會在CSS過渡完成后觸發。 你可以用JavaScript監聽這個事件，做一些額外的處理。
const myDiv = document.querySelector('.my-div'); myDiv.addEventListener('transitionend', (event) => { console.log('Transition ended!', event.propertyName); });
event.propertyName可以告訴你哪個CSS屬性完成了過渡。這在處理多個屬性的過渡時很有用。
如何用transition實現更復雜的動畫效果？
雖然transition主要用于簡單的狀態過渡，但通過巧妙地組合CSS屬性，也可以實現一些復雜的動畫效果。 比如，你可以結合transform屬性，實現元素的平移、旋轉、縮放等動畫效果。
.my-div { width: 100px; height: 100px; background-color: red; transform: translateX(0); transition: transform 0.5s ease-in-out; } .my-div:hover { transform: translateX(100px); }
這段代碼會讓div在鼠標懸停時向右平移100像素。
為什么我的transition沒生效？
transition沒生效可能有幾個原因：
- 沒有指定transition屬性: 確保你已經給元素添加了transition屬性。
- 屬性值沒有變化: transition只在屬性值發生變化時才會生效。 如果屬性值沒有變化，就不會有過渡效果。
- 屬性不支持過渡: 有些CSS屬性是不支持過渡的，比如display。
- 優先級問題: 確保你的transition規則沒有被其他規則覆蓋。
可以嘗試在開發者工具里檢查元素的CSS樣式，看看transition屬性是否生效，以及屬性值是否正確。
如何優化transition性能？
過渡動畫可能會影響頁面性能，尤其是在移動設備上。 為了優化性能，可以考慮以下幾點：
- 使用硬件加速屬性: 盡量使用transform和opacity屬性，這些屬性可以利用GPU加速，提高性能。
- 避免過渡layout屬性: 過渡width、height等layout屬性可能會導致頁面重排，影響性能。
- 減少過渡元素的數量: 過多的過渡元素會增加瀏覽器的負擔。
- 使用will-change屬性: will-change屬性可以提前告訴瀏覽器哪些屬性將會被修改，讓瀏覽器提前做好優化。
.my-div { will-change: transform, opacity; }
但要注意，不要濫用will-change屬性，否則可能會適得其反。
如何讓transition更自然？
transition的速度曲線（timing-function）對動畫效果的自然程度影響很大。 ease、linear、ease-in、ease-out、ease-in-out等預定義的曲線可以滿足大部分需求，但如果你想讓動畫更自然，可以嘗試自定義cubic-bezier曲線。
cubic-bezier曲線用四個點定義一個貝塞爾曲線，可以精確控制動畫的速度變化。 你可以在網上找到很多cubic-bezier曲線生成器，或者自己手動調整。
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
這個例子使用了一個自定義的cubic-bezier曲線，創建了一個稍微有些彈性的動畫效果。
總而言之，transition是一個非常實用的CSS屬性，可以讓你輕松地創建平滑的頁面過渡效果。 掌握了它的基本用法和一些高級技巧，你就可以讓你的網站更加生動有趣。
