FLIP动画
优点
- transform 和 opacity 开启 GPU 硬件加速
- transform 利用 tranlate 和 scale 完成平移和缩放
- transition 只需监听 transform 动画,变化源唯一,整体动画更加平滑稳定,保证一致
细节注意
- 展示图动画完成后尽量避免脱离文档流定位
- 可能导致父元素尺寸变化影响布局
- 元素定位顺序可能对其他兄弟元素产生影响
- 注意字体缩放,包含字体的容器尽量采用行内块(inline-block),避免块级元素动画前后尺寸缩放,影响字体大小
- 动画前后尽量只做 平移和缩放 等transform、opacity副作用,其他副作用需要针对性处理
- 其他副作用的存在可能导致动画不平滑稳定