animejs动画库推荐及Vue下与transition动画

记录一下最近新发现并立即应用到项目开发的一个强大动画库——animejs。 anime.js是一个强大的用来制作动画的javascript库，功能上基本与GASP（greensock）没有差距，之所以在github上短期内获得大量追捧和收获赞，就在于其足够轻便，gzip压缩完只有9kb左右，同样支持硬件加速SVG图标动画，与VUE、REACT等知名开发框架的transtion动画组件无缝衔接。 官方网站：http://animejs.com 下面主要介绍一下在VUE和Nuxt中引入及与transition动画组件配合使用方法： 1. Vue中直接安装后全局注册即可直接使用 anime({/*动画*/}); 2. Nuxt中可安装@hypernym/nuxt-anime，在nuxt.config.ts中配置modules:['@hypernym/nuxt-anime'],anime: {composables: true},这里我将anime直接注册为Nuxt的composables组件，使用时直接useAnime更加方便。 **动画组件配合：** ``` <script setup> const enter=(el,done)=>{useAnime({targets:el,duration:800,translateY:[30,0],opacity:['0%','100%'],delay:el.dataset.index*150,complete:done})}; const leave=(el,done)=>{useAnime({targets:el,duration:500,scale:0,opacity:0,easing:'easeInCubic',complete:done})}; </script> ``` **动画调用：** ``` <transition-group @enter="enter" @leave="leave" :css="false" tag="ul">     <li v-for="(item,index) in list" :data-index="index">{{item}}</li> </transition-group> ``` 注：这里使用Vue3的语法糖书写（个人习惯），在进入时使用了交错动画进入，用数据的index作为参考计算了交错间隙时间，改变元素的translateY和opacity两个属性，分别跟的两个参数代表from,to，可直接控制元素载入时从什么状态到什么状态来生成动画。离开时触发动画，如果需要平滑消失，需要修改width/height才可实现，当然属性也可以使用from,to的方法来控制。