理解CSS過渡transition

示例效果

屬性介紹

transition-property

transition-property定義應用過渡效果的CSS屬性名稱，默認值all，表示所有屬性都獲得過渡效果；屬性值none表示沒有屬性獲得過渡效果；property規定應用過渡效果的CSS屬性。

過渡屬性可以是多個值，多個屬性之間用逗號間隔。

示例：transition-property: opacity, width;

並不是所有CSS屬性都有過渡效果，只有具有中間值的屬性才有效果，一般來說屬性值可以為數值的均可獲得過渡。

transition-duration

transition-duration定義完成過渡的時長，默認值0s，屬性值為秒或毫秒

transition-timing-function

transition-timing-function定義過渡動畫函數。默認值ease，表示慢速開始，然后變快，慢速結束；linear表示勻速運動；ease-in表示慢速開始（慢到快）；ease-out表示慢速結束（快到慢）；ease-in-out表示慢速開始和結束（慢到快到慢）；cubic-bezier(x1, y1, x2, y2)自定義貝塞爾運動曲線。

關於貝塞爾曲線可參考這篇文章：貝塞爾曲線掃盲

貝塞爾曲線：

過渡效果的貝塞爾曲線通過四個點來控制，繪制的是三次貝塞爾曲線，其中p0表示(0,0), p3表示(1,1)。transition-timing-function屬性通過確定p1(x1, y1)和p2(x2,y2)的坐標值來確定曲線值，x1，y1，x2，y2都是0到1范圍內的值(包括0和1)
在線獲取貝塞爾曲線值

過渡原理：

Vstart = 屬性起始值； Vend = 屬性結束值； Vres = 中間值； p = 過渡動畫函數輸出值

Vres = (1 - p) * Vstart + p * Vend

Vres就是根據曲線動畫計算出的不同時刻CSS屬性值

steps步進函數：
transition-timing-function屬性值除了可以為關鍵字和貝塞爾函數，還可以是steps步進函數，平時用到的情況很少，我能想到的就是進度條效果。steps步進函數將過渡事件划分為大小相等的時間間隔來運行，它有兩個參數：

steps(<integer>[,start | end]?)

第一個參數指定間隔數，值為正整數；第二個參數可選，默認值end，可選值start。參數end可簡單理解為第一幀是第一步開始，參數start表示第一幀是第一步結束。

示例中的例1和例2比較了這兩種效果，當鼠標放到第一個元素上時，步進分三次到達終點，每次中間間隔時間一樣，當鼠標放到第二元素上時，元素瞬間完成第一次步進，后兩次間隔時間一樣

transition-delay

過渡效果等待時間，默認值0s，屬性值秒或毫秒

transition

transition定義元素的過渡效果，它是以下幾個屬性的簡寫：

 transition-property
 transition-duration
 transition-timing-function
 transition-delay

默認值all 0s ease 0s

多值

上面介紹了transition的基本屬性，transition可以定義多個屬性值一起參與過渡：

.test {
  transition: width 2s linear 100ms, opacity 2s ease 100ms;
}
// 等同於
.test {
  transition-property: width, opacity;
  transition-duration: 2s;
  transition-timing-function: linear, ease;
  transition-delay: 100ms;
}



.test1 {
  transition: width 2s linear 100ms, height 1s ease 0s, opacity 2s linear 100ms;
}
// 等同於
.test1 {
  transition-property: width, height, opacity;
  transition-duration: 2s, 1s;
  transition-timing-function: linear, ease;
  transition-delay: 100ms, 0s;
}

當transition-property的數量多於對應的transition-delay | transition-timing-function | transition-duration的屬性值(屬性值的個數大於1個)時，將按順序開始取值

過渡階段

過度分為前進（forward）和反向（reverse）兩個階段，若前進階段進行一段時間后進入反向階段，則反向階段的初始值是前進階段結束時的瞬間值。

以hover為例，當元素在非hover狀態時設置transition，則前進和方向過渡效果是一樣的；當在元素hover狀態時設置transition，則前進狀態是hover時設置的為准，反向狀態是非hover時設置的為准

例3和例4對比了兩種效果：把鼠標放到例3中的盒子上在移開，前進和反向動畫一樣，把鼠標放到例4中的盒子上再移開，前進有過渡動畫，反向就沒有了。

例5演示了設置前進和反向不同時間的過渡動畫

觸發方式

過渡觸發方式有三種：偽類觸發、媒體查詢和JavaScript觸發。

偽類觸發

例5演示了hover觸發。
例6演示了focus觸發，鼠標常按可查看過渡效果。
例7演示了active觸發。

媒體查詢

@media (max-width: 1000px){
  .test{
     width: 300px;
  }
}

JS觸發

test.onclick = function(){
    test.style.width = '300px';
    setTimeout(function(){
        test.style.width = '100px';
    },2000);
}