Transition 過渡

1：基本概念

在必定時間內平滑的過渡，也就是圓滑的以動畫效果改變css的屬性值。它的過渡能夠由鼠標點擊、焦點獲取或者失去、被點擊事件或對元素的改變中觸發；不能主動觸發，只能被動觸發。

經常使用的基本屬性有：Transition-duration（過渡時間）、Transition-property （過渡 CSS 屬性名稱）、Transition-delay（過渡開始時間）、貝塞爾曲線、Transition-timing-function（過渡效果時間曲線）和Transition（簡寫設置四個屬性）。

2：瀏覽器兼容

3：Transition-duration

必須搭配transition-property同時使用，由於要指定一個過渡的一個屬性才能使用；默認值是0。

transition-duration: s | ms;

4：Transition-property

必須搭配transition-duration同時使用；默認值是all（全部屬性都獲取過渡效果）；除此以外Transition-duration的值還能夠是none（沒有過渡效果）、property（特定屬性得到過渡效果，多個屬性用逗號隔開；）。

不是全部的CSS屬性都支持transition-property：all；支持的都有一個明確的臨界：

background-color、background-position
border-color、border-width、border-spacing
clip
color
crop
font-size、font-weight
height、width、line-height
right、left、bottom、top
margin、padding
max-height、max-width、min-height、min-width
outline-color、outline-offset、outline-width
text-indent、text-shadow、vertical-align、word-spacing、letter-spacing
visibility
opacity
z-index

5：Transition-delay（延遲多長時間才而後纔去執行轉換的過程）

transition-delay: s | ms;

6：貝塞爾曲線

• 應用於二維圖形應用程序的數學曲線
• 繪製貝塞爾曲線

• 函數形式的貝塞爾曲線

  • 一階貝塞爾曲線
  • 二階貝塞爾曲線
  • 三階貝塞爾曲線

• cubic-bezier(n1, n2, n3, n4)

  • P0 (0, 0)
  • P1 (1, 1)
  • P2 (n1, n2)
  • P3 (n3, n4)
• 曲線上點的切線的斜率對應的運動速度
• http://cubic-bezier.com/ - 可視化cubic-bezier編輯

7：Transition-timing-function（時間過渡曲線）

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n1, n2, n3, n4);

• 默認ease
• n一、n二、n三、n4取值，官方推薦（0-1）
• linear - 以相同速度過渡 - cubic-bezier（0, 0, 1, 1） / cubic-bezier（1, 1, 0, 0）
• ease - 慢速開始 -> 變快 -> 慢速結束 - cubic-bezier（0.25, 0.1, 0.25, 1）
• ease-in - 慢速開始 - cubic-bezier（0.42, 0, 1, 1）
• ease-out - 慢速結束 - cubic-bezier（0, 0, 0.58, 1）
• ease-in-out - 慢速開始、慢速結束、幅度比ease大 - cubic-bezier（0.42, 0, 0.58, 1）
• cubic-bezier(n, n, n, n) - 自定義速度函數 （n介於0和1）

8：侷限性與優點

優勢：簡單易用 ；

侷限性：

• transition須要事件觸發，因此不能在網頁加載是自動發生；也就是說不能主動觸發，只能被動觸發。
• transition是一次性的，不能重複發生，除非一再觸發。
• 只能定義開始和結束的屬性值，不能定義中間狀態，也就是說只有兩個狀態。

本篇文章主要分享了Transition的基本概念，Transition相關的數學基礎，在此基礎上介紹了duration、property、delay、timing-function經常使用屬性， 以及總結了Transition的優缺點。