vue项目开发中，为了让大屏更酷炫，会添加很多动画元素，今天来讲一下vue下transition结合gsap补间动画插件实现动画效果。

安装依赖

npm install gsap

引入组件

import gsap from 'gsap';

使用JavaScript来执行过渡动画时，需要进行 done 回调，否则它们将会被同步调用，过渡会立即完成.添加 :css="false" 过滤掉css的干扰。

创建一个transition，添加一个enter事件以及一个leave事件

<transition :css="false" @enter="enter" @leave="leave">
    <div v-if="show" class="progressBar">
    </div>
  </transition>
  <div class="anniu" @click="show=!show">动画切换</div>

方法

创建一个enter方法 以及一个leave方法

enter(el, done) {
  console.log('enter')
  gsap.from(el, {
    scale: 0,
    x: 200,
    onComplete: done
  })
},
leave(el, done) {
  console.log('leave')
  gsap.to(el, {
    scale: 0,
    x: 200,
    onComplete: done
  })
},

效果演示

除了上面的js方法，我们还可以通过css的方法来实现动画效果，vue transition 结合 animate.css 实现动画过渡

更多数据可视化大屏教程

vue3 vite 数据可视化大屏教程