Vue配合animate.css样式库实现过渡动画

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>

实现效果（因为是动画就不演示了可以自行试试）：