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

代码演示：

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是动画效果名称，可以在官网查看