FLIP 技术
FLIP 技术可以帮助你创建轻量级的动画。FLIP是First、Last、Invert和Play四个单词首字母的缩写。
FLIP 将一些性能低下的动画映射为 transform 动画。通过记录元素的两个快照，一个是元素的初始位置（First – F），另一个是元素的最终位置（Last – L），然后对元素使用一个 transform 变换来反转（Invert – I），让元素看起来还在初始位置，最后移除元素上的 transform 使元素由初始位置运动（Play – P）到最终位置。
它就是通过这样一种高性能的方式来动态的改变DOM元素的位置和尺寸，而不需要管它的布局是如何计算或渲染的（比如，height、width、float、绝对定位、Flexbox和Grid等）。
上面这个过程可以拆解为以下四个步骤：
1. First
元素的初始状态，记录当前元素的位置、尺寸、透明度等等的样式信息
2. Last
元素的最终状态，即动画后元素的位置、尺寸、透明度等等的样式信息
- Invert
将元素恢复至动画前状态，即相反操作，先计算出从初始状态到最终状态元素发生的改变，比如宽度、高度、透明度等，然后在元素上应用 transform 或 opacity 使这些改变反转，给人一种错觉，即它原来就在初始位置。
这一步比较关键，是此技术的核心，我们举例说明一下：假如现在有一个图片列表，初始有两个图片 img1，img2，然后在列表开头加入新图片 img3，img4，此时 img1 和 img2 就会被挤到后面去。
假设 img1 的初始位置是 (0, 0)，被挤下去后的位置是 (100, 100)，那么此时浏览器还没有渲染，我们可以在这个时间点通过设置 img1.style.transform = translate(-100px, -100px)，让它先 Invert 倒置回位移前的位置。
- Play
执行动画，前面的准备工作都做好了，最后就是 Play 了，移除元素上的 transform（将transform置为0或none） 并启用 tansition 相关的动画。
为了便于大家更好的理解FLIP技术的原理，使用下面的流程图向大家展示，或许更易于理解：
FLIP
网友评论