gsap-flip

本期给大家简单介绍一下Flip, 这个插件非常适合让你的dom在2个状态之间切换(位置信息,大小,旋转角度等)
比如你原先删除一个dom,现在想要让这个dom体面的被删除,那么就可以使用这个Flip组件

使用他非常简单, 首先你需要引入Flip plugin,

1
2
3
4
import { gsap } from 'gsap';
import Flip from 'gsap/Flip';

gsap.registerPlugin(Flip);
  1. 拿到当前dom的状态
1
const state = Flip.getState("#YourDom");
  1. 修改当前的组件状态
    比如把这个dom挪到另外一个容器下面

  2. 接着配置动画效果

    1
    2
    3
    Flip.from(state, {
    duration: 1
    });

搞定