animate动画库:https://animate.style/

代码演示:

202105211621585883137501

1、终端下载动画库 npm install animate.css --save

2、在main.js中使用

// animate动画库
import animate from 'animate.css'
Vue.use(animate)

3、在页面使用

<div id="wrap"> <button @click="show=!show">切换</button>
  <transition name="fade" enter-active-class="animate__animated animate__shake" leave-active-class="animate__animated animate__flipOutX">
    <h1 v-if="show">王先生</h1>
  </transition>
</div>

注意:

类名中一定要添加“animate__animated”

而“animate__fadeIn”为可替换部分
JavaScript

var vm = new Vue({
  el: '#wrap',
  data: {
    show: true
  },
  methods: {}
})
将需要添加动画的标签用transition包裹,设置进入与隐藏的过渡动画,enter-active-class="animated shake"shake是动画效果名称,可以在官网查看