在Vue中使用GSAP完成动画（一）

Posted 2023-03-21

参考技术A

GSAP（GreenSock Animation Platform）是一个专业的动画库，可以用它完成你想要的各种效果

**从当前状态过渡到指定状态 vars **

从指定状态 vars 过渡到初始状态

**从指定状态 vars1 过渡到结束以后的状态 vars2 **

从当前状态过渡到指定状态 vars ,与 to() 不同的是它可以完成多个目标对象的过渡，并且多了四个全新的参数

同时还有两个类似的方法为 staggerFrom() , staggerFromTo() 同理，后面不再赘述

tips:html中写了多个 <div class="box" ref="box"></div>

设置 delay 秒以后触发一个回调函数，有点setTimeout的感觉

立即设置目标的属性值而不产生过渡动画，相当于0的动画时间

本文大致罗列了在 vue 中如何使用 GSAP ，以及它的动画结构，个人理解就是用的最多的基础调用方式，接下来作者还将继续学习后面的内容