FLIP动画思想

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，就是一个流畅的动画，多数情况下，是不会超过的，甚至比正向动画还要快速。