flip是一種助記縮寫也是一種 paul lewis首創 的技術， 代表 first, last, invert, play。 他的文章包含了對這一技術的乙個很好的解釋，但我會在這裡概括一下：
first 記錄元素動畫前的位置和尺寸
last 記錄元素動畫後的位置和尺寸，可以直接修改style，讓元素瞬移過去
invert 使用transform和opacity將元素恢復至動畫前狀態，即相反操作
play 執行動畫，將transform置為0或none，移動到動畫後的位置和尺寸
這種動畫方法，適合以下場景：
動畫的fist(初始態)或last(最終態)不明確，這時候，使用flip非常容易做出動畫效果。
而狀態都明確的條件下，使用flip是多此一舉。
例如：乙個列表，要刪除其中乙個，要求剩餘是所有，自動安裝順序填充，這個場景就非常適合使用flip來做，因為多個的最終位置是難以確定的，直接計算，要考慮到螢幕解析度不同，位置差異，比較困難。
1. flip能提高動畫流暢度
使用者在網頁上進行互動時，比如click，touch，從互動結束到感知到程式的相應大約需要100ms的生理反應時間。如果你的**在100ms內作出了相應的響應，那麼在使用者看來，就是得到了立即的響應。否則使用者就會覺得反應延遲。
所以我們在使用者互動後要做100ms內準備好動畫，然後以60fps的幀速進行動畫的執行。這些動畫準備計算就是getboundingclientrect(或getcomputedstyle)等的計算，而60fps的真素，則需要通過transform或者opacity的反轉動畫來實現。我們先將元素設定到了結束位置，通過transform來模擬開始位置，然後去除transform這個反向的過程，使得瀏覽器知道了動畫的開始位置和結束位置，計算量銳減，流暢度速度提公升。
只要flip動畫反轉時間不超過100ms，就是乙個流暢的動畫，多數情況下，是不會超過的，甚至比正向動畫還要快速。
vue之flip動畫解析
template div ul class container li v for item in base key item.id ref lis div class item style backgroundcolor item.c div li ul el button click sort 排...
CSS3實現翻轉 Flip 效果
今天，我們用比較簡潔的css3來實現翻轉效果。當滑鼠滑過包含塊時，元素整體翻轉180度，以實現 正 反 面的切換。分析 container，flip為了實現動畫效果做準備。front,back各包裹一張。實現該效果的html如下 1.元素布局 為了實現以上效果，先進行元素布局。給.front,bac...
FLIP 70 Flink SQL計算列設計
相容性 棄用和遷移計畫 測試計畫 當前狀態 已接受 討論線索 jira flink 14386 support computed column for create table statement open在任務flink 10232中，我們在新模組flink sql parser中引入了creat...