GSAP动画组件在NUXT3中实现多目标交替动画延时效果。

GSAP是The GreenSock Animation Platform简写，是一个功能十分强大的动画平台，可以帮助我们实现大部分的动画需求，构建高性能的、适用于所有主要浏览器的高性能动画；GSAP非常的灵活，可以在任何框架上处理页面能够所有通过js改变的元素，不仅可以对div的css属性进行动画，还是SVG、React、Vue、WebGL，甚至和Threejs一起使用。除了GSAP核心库外，还有很多实用的插件，比如结合ScrollTrigger插件，我们可以实现非常震撼的滚动触发效果；同时也不需要担心响应式的问题，GSAP确保项目响应迅速、高效且流畅。 这里我们主要记录一下在NUXT3中安装GSAP并使用，且详细记录配合transition-group实现列表动画及交替动画延迟效果。 1. 在NUXT3中安装GSAP，这里使用支持NUXT3配合的组件 ``` npm i @hypernym/nuxt-gsap --save-dev ``` 2. 在nuxt.config.ts中配置，composables:true，将gsap配置组件，可直接使用useGsap调用，不需要再引入。 ``` //nuxt.config.ts中配置 modules: ['@hypernym/nuxt-gsap'], gsap: { composables: true }, ``` 3. 配合transition-group使用动画。 1. animate:配置css类，因为GSAP不支持数组顺序调换的过程动画，这里使用animate类来实现，自然也就不用启用 :css="false"。 2. transtion-group中的监听事件enter、leave都是单个目标依次返回，故每个元素变化时都单独调用一次,导致gsap一次不能监听到多个目标，所以这里使用类监听，当一次传入多个目标后gsap中的stagger参数就可以直接设置交替时间差，也可以使用{each:间隔时间,from:[1,0]}来调整动画先后顺序，更多的grid及其它参数参考官网。当然也可以使用el来监听单个目标，并在对象中设置data-index来绑定index，动画中使用delay来实现交替，但用过的小伙伴都知道，数据超多的时候，操作一条数据也会等待对应的索引时间长度，这是不能接受的。 3. gsap的timeline时间轴动画，将useGsap.to替换为timeline.to即可加入时间轴动画，时间轴可以在定义时使用default来配置所有动画队列时的参数。 ``` //配合transition-group使用 为了支持数组顺序调整动画 :css="false"不能使用 name指定对应的CSS <template> <transition-group appear @enter="enter" @leave="leave" name="animate"> <div v-for="(item,index) in dataList" :data-index="index" :key="item"> <div>{{item}}</div> </div> </transition-group> <style> /*解决transitionGroup onMove在animatejs动画组件中不支持问题*/ .animate-move {transition:all 0.5s ease;} </style> </template> <script setup lang="ts"> //const timeline=useGsap.timeline({defaults:{duration:0.2,ease:'power4.out',delay:-0.1}});//gsap动画控制 const enter=(el,ok)=>{useGsap.fromTo('.animate-enter-active',{opacity:0,translateX:50},{opacity:1,translateX:0,stagger:0.1,ease:'power4.out',onComplete:ok})}; const leave=(el,ok)=>{useGsap.to('.animate-leave-active',{opacity:0,translateX:50,height:0,stagger:0.1,ease:'power4.in',onComplete:ok})};//顺序翻转{each:0.1,from:[1,0]} </script> ```