flip你的動畫

在vue官方文檔上看到vue使用flip作動畫，就去研究了一下。這是一個準則，協調js和css對動畫的操做。若是你看到個人前一篇文章一篇文章說清瀏覽器解析和CSS（GPU）動畫優化，理解本篇文章仍是很簡單的。

flip概念

首先咱們說說flip這幾個字母的含義：

F:first，參加過渡元素的初始狀態。
L:last，元素的終止狀態。
I:invert，這是flip的核心。你經過這個元素的初始狀態和終止狀態計算出元素改變了什麼，好比它的寬、高及透明度，而後你翻轉這個改變；舉個例子，若是一個元素的初始狀態和終止狀態之間偏移90px，你應該設置這個元素transform: translateY(-90px)。這個元素好像是在它的初始位置，其實正好相反。
P：play，爲你要改變的任何css屬性啓用tansition，移除你invert的改變。這時你的元素會作動畫從起始點到終止點。

如下是代碼示例：

//js
var app = document.getElementById('app');
var first = app.getBoundingClientRect();
app.classList.add('app-to-end');
var last = app.getBoundingClientRect();
var invert = first.top - last.top;
//使元素看起來好像在起始點
app.style.transform = `translateY(${invert}px)`;
requestAnimationFrame(function() {
   //啓用tansition，並移除翻轉的改變
  app.classList.add('animate-on-transforms');
  app.style.transform = '';
});
app.addEventListener('transitionend', () => {
  app.classList.remove('animate-on-transforms');
})

<div id="app"></div>
<style>
  #app{
    position: absolute;
    width:20px;
    height:20px;
    background: red;
  }
  .app-to-end{
    top: 100px;
  }
  .animate-on-transforms{
    transition: all 2s;
  }
</style>

使用flip的好處

看到這裏，若是你看過個人上一篇文章一篇文章說清瀏覽器解析和CSS（GPU）動畫優化，你知道getBoundingClientRect()是一個耗費昂貴的操做，它會迫使瀏覽器發生一次重排。那麼爲何咱們能夠作這消耗不菲的操做呢？

如上圖所示，在用戶與網站交互後有100ms的空閒時間，若是咱們利用這100ms作預計算操做，而後使用css3的transform和opacity執行動畫，用戶會以爲你的網站響應很是快。

注意事項

一、別超過100ms的空閒期：一旦超過這個空閒期，就會形成卡頓的情況出現；使用開發者工具注意這一點。
二、仔細安排動畫：想象一下你正在執行你動畫中的一個，而後你執行另一個；這個須要大量的預計算。這會打斷正在運行的動畫，這是糟糕的。關鍵是確保你的預計算在用戶響應的空閒時間執行，這樣兩個動畫就不會衝突了。
三、使用transform和scale時，元素會被扭曲；雖然能夠重構標籤避免扭曲，但最終他們會相互影響。

總結

flip是一個如何作動畫的思考方式，它是使css和js很是好的配合。使用js作計算，使用css作動畫。使用css作動畫不是必定的，你也可使用Web Animations API或者單單JavaScript。關鍵是你要減小每一幀的複雜度（推薦使用transform和opacity）。

參考

https://aerotwist.com/blog/fl...