認識一下transition

transition

之前的CSS屬性切換時，因爲只有開始和截止兩個狀態，切換時略顯生硬

jquery.animate

傳說中的jquery在保證兼容性以後，又爲開發者提供了簡潔的過渡(動畫其中之一效果)的語法，只須要簡單使用如下代碼便可實現一個複雜的過渡效果

$(selector).animate({
  cssProp: cssValue
})

在很長一段時間，這種實現動畫的方式風靡一時

缺點

1. 須要選擇到具體的DOM，這在如今廣泛存在事件代理的時候，在觸發狀態元素複雜的關係，選擇具體DOM是一件困難的事

2. animate內部時使用定時器，在性能上確定與原生沒法比較

Transitions

在遇到觸發動畫難以定位元素時，我放棄了animate方法，嘗試去往CSS方向尋找解決方案，transition此時出如今個人眼前

一個CSS屬性固然先要看兼容性，不然就是耍流氓

IE 10+ 兼容已經比較好了

能夠看一下對比代碼,好比說hover狀態元素變寬

$(e).on('hover' function () {
  $(e).animate({
    width: "300px"
  })
})

.e {
  width: 100px;
  transition: width 0.2s;
}
.e:hover {
  width: 200px;
}

對比

1.代碼

jQuery實現的過渡，須要使用js操做DOM，並且存在DOM複雜時很差操做的狀況

可讀性: 二者都須要知道animate和transition，成本幾乎一致，可是在代碼可讀性層面上，CSS完勝

可維護性： 將來須要擴展的話，改動CSS成本較小，至少能夠減小測試，甚至不用測試

2.性能

JQuery代碼使用了setInterval來實現動畫，而transition是遊覽器內置實現，能夠運行引擎持續優化，在目前，transition也是性能更好

總結

能夠說animate方法實現過渡在transition面前不堪一擊，學習transition只須要動動手指，瞭解一下參數便可。