flip你的動畫

在vue官方文檔上看到vue使用flip做動畫，就去研究了一下。這是一個準則，協調js和css對動畫的操作。

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的好處

你知道getBoundingClientRect()是一個耗費昂貴的操作，它會迫使瀏覽器發生一次重排。那么為什么我們可以做這消耗不菲的操作呢？

如上圖所示，在用戶與網站交互后有100ms的空閑時間，如果我們利用這100ms做預計算操作，然后使用css3的transform和opacity執行動畫，用戶會覺得你的網站響應非常快。

注意事項

1、別超過100ms的空閑期：一旦超過這個空閑期，就會造成卡頓的狀況出現；使用開發者工具注意這一點。

2、仔細安排動畫：想象一下你正在執行你動畫中的一個，然后你執行另外一個；這個需要大量的預計算。這會打斷正在運行的動畫，這是糟糕的。關鍵是確保你的預計算在用戶響應的空閑時間執行，這樣兩個動畫就不會沖突了。

3、使用transform和scale時，元素會被扭曲；雖然可以重構標簽避免扭曲，但最終他們會相互影響。

總結

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

參考

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

來自：https://segmentfault.com/a/1190000008907850