Filp动画

1.介绍

Filp动画是按照==FirstLastInversePlay==四大步骤（每个单词首字母组成Filp）,它能够解决前端一些复杂的动画和一些不支持css过渡的动画。

2.实现逻辑

1.第一步（First）

​ 首先记录元素当前的位置。

// 首先获取元素的矩形位置信息。
// target_el = 目标元素

const elRect = target_el.getBoundingClientRect();

2.第二步（Last）

​ 记录元素要改变的目标位置的位置信息。

// 记录改变后目标元素的位置信息。
// 这里举例把目标元素插入到父元素的最后一个子元素。
// parent_el = 目标元素的父元素。
// last_el = 目标元素父元素的最后一个子元素。

// 将目标元素插入到最后一个元素的下一个元素节点。
parent_el.insertBefore(target_el,last_el.nextElementSibling);
// 记录元素改变后的位置信息。
const changedElRect = target_el.getBoundingClientRect();

3.第三步（Inverse)

​ 将改变位置后的元素通过tranform属性平移到改变位置之前==注意，此时的元素显示的还是改变位置之前的位置信息但实际上元素已经处于最后一个元素的位置上只是还未渲染出来==，此时我们通过transform的translateY属性根据之前记录的位置信息可以算出我们要平移多少px可以回到原点。

// 元素平移回到开始的位置。
// 平移量为开始位置减上改变之后的位置。
const y = elRect.top + changedElRect.top;
target_el.style.transform = `translateY(${
     y}px)`

4.第四步（play）

​ 此时元素在页面已经显示出来了，它会覆盖到第一个元素只上，此时我们通过移除transform属性再通过添加transition过渡属性让它有个动画去到改变后的位置。

// 在下一个渲染帧，移除transform属性播放动画。
requestAnimationFrame(()=>{
   
    target_el.style.transition = 'transform .3s ease-in-out';
    target_el.style.removeProperty('transform');
})

​ 此时元素会过渡到目标位置形成一个动画，这就是Filp动画的一个实现思路，这个Filp动画主要是提供一个思路，代码还得要自己去写，我这里只是简单的写了一下实现过程，想要完全掌握这个动画大家还需要自己去实现一些动画。

3.结语

Filp动画的思路还是挺值得我们学习的，在实现动画上也提供了很大的帮助，大家可以多学习一下，如果觉得我介绍的还可以的话可以关注我我以后会为大家介绍前端更多的知识和技巧等。