第三方动画库animation
animation.css是一个现成的跨浏览器动画库，能够帮助开发者快速的实现一些很炫酷的动画效果
官网地址：https://animate.style
使用步骤：
一、安装
使用 npm 安装：
$ npm install animate.css --save
引入：
import 'animate.css'
或者在html文件中通过link标签引入：
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
二、用法：
1.给transition标签添加name属性值为animate__animated animate__bounce，一定要加！！！
//html
<div>
<button @click="isShow=!isShow" style="backgroundColor:orange">显示隐藏</button>
<transition-group name="animate__animated animate__bounce" appear><!--//appear属性,初始显示时动画显示-->
<h1 v-show="isShow" key="1">你好啊！</h1>
<h1 v-show="isShow" key="2">我挺好的！</h1>
</transition-group>
</div>
export default{
data(){
return{
isShow:true,//默认显示
}
}
}
2.添加动画enter-active-class代表进入的动画，leave-active-class代表离开时的动画。我们可以在animation动画库的官网 animation官网找到自己想要的动画效果，直接复制class名添加到我们的项目中就可以了