GSAP学习（七）flip插件，简单来说它是一个只需记录元素的初始状态和结束状态，剩下的就可以自主完成动画过程的插件。所

flip插件，简单来说它是一个只需记录元素的初始状态和结束状态，剩下的就可以自主完成动画过程的插件。所以用flip插件创建动画一般有三个过程。

一是用getState函数记录初始状态，例如

const state = Flip.getState(".details, .full-screen");

记录下.details和.full-screen类名下元素的属性。也可以增加第二个参数来指明具体记录下的属性

// capture state
const state = Flip.getState(".details, .full-screen", {
  props: "backgroundColor,color"
});

第二步就是操作dom，通常是修改类名，修改样式等操作，来到达最终状态。

element.classList.toggle("full-screen");

第三步就是用flip来创建完整的动画，写法就像是gsap一样

Flip.from(state, {
  duration: 1,
  ease: "power1.inOut",
  absolute: true,
  onComplete: myFunc,
});

最终返回的结果是gsap的timeline，时间轴动画。

这里只是简单介绍，更复杂的属性可以查看官网