一、基本使用

animate.js库的网址：https://animate.style/

1、安装animate.css库

npm i animate.css 

2、引入animate.css库

import 'animate.css';

3、基础用法

name="animate__animated animate__bounce"必须配置

 <transition name="animate__animated animate__bounce">

4、配置样式

通过enter-active-class和leave-active-class实现不同样式配置

<transition 
	name="animate__animated animate__bounce" 
	enter-active-class="animate__swing" 
	leave-active-class="animate__fadeOutTopLeft"
>
...
</transition>

官网选择样式（右侧）

二、案例练习

<template>
  <div>
    <button @click="changeShow">显示与隐藏</button>
    <transition
      name="animate__animated animate__bounce"
      enter-active-class="animate__swing"
      leave-active-class="animate__fadeOutTopLeft"
    >
      <h3 v-show="isShow">你好，小猫咪</h3>
    </transition>
  </div>
</template>

<script>
//引入animate库
import "animate.css";
export default {
  name:"Demo2",
  data(){
    return {
      isShow:true
    }
  },
  methods:{
    changeShow(){
      this.isShow=!this.isShow
    }
  }
}
</script>

运行结果