Vue配合animate.css样式库实现过渡动画
Vue自带有实现过渡动画效果的标签以及相关的属性与方法，加上Animate.css外部样式库，对于不擅长Css却想要实现某些过渡效果非常有用
animate.css的引入与使用
安装：
npm -i install animate.css
animate.css 官网
https://animate.style/
这个官网有时一般能访问到，看情况。
进入官网有这么一段代码描述：
After installing Animate.css, add the class animate__animated to an element, along with any of the animation names (don’t forget the animate__ prefix!):
<h1 class="animate__animated animate__bounce">An animated element</h1>
在使用具体样式类之前是要引入这两个类的
之后在官网界面的右侧，展示了那些类的效果，复制类名引入就可以具体使用。
下面是具体的使用方法
Vue+animate.css实现过渡动画效果的方法
代码实现：
<template><div><button @click="isShow = !isShow">显示/隐藏</button><!-- transition标签作用：可以为标签中的内容用Vue的方法实现过渡动画效果 appear属性则是开启出场过渡动画name指定使用的样式类enter-active-class类：name指定的类中用于进入动画的样式类leave-active-class类：name指定的类中用于离开动画的样式类--><transition appear name="animate__animated animate__bounce"enter-active-class="animate__backInDown"leave-active-class="animate__backOutDown"><h2 v-show="isShow">{{clickName}}</h2></transition></div></template><script>import 'animate.css' //这里是引入css文件，所以不要写成：import...from...export default {name:'TestTransition',data() {return {isShow:true,clickName:'过渡动画'}},}</script><style scoped> h2 {text-align:center;background-color: aqua;width: 50%;}</style>
实现效果（因为是动画就不演示了可以自行试试）：
如果觉得《Vue配合animate.css样式库实现过渡动画》对你有帮助，请点赞、收藏，并留下你的观点哦！
