继前面内容后在Vue中实现动画效果的懒人法

在前面介绍了Vue中的动画和过渡，接下来讲使用偷懒的方法，实现页面的动画效果。

首先我们在开发软件中下载第三方的css样式库，可以获得更多的动画样式效果。

如：在npm中有个好用的库：animate.css   这是一个成型的动画库 

.右边都是各种动画样式。

现在，先在软件中安装：npm install animate.css

这个库很小，很快就能下载好 

 然后在.Vue文件中引入这个第三方的库文件

import 'animate.css' 

引入后，要把它的类名name写好，这里是固定的类名：

name="animate__animated animate__bounce"

然后从Animate.css中选择合适进入的动画和离开的动画

  

enter-active-class="animate__swing"
		leave-active-class="animate__backOutUp"

 整个效果就完成了

完整的代码：

<template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition-group appear
		name="animate__animated animate__bounce"
		enter-active-class="animate__swing"
		leave-active-class="animate__backOutUp"
		>                
			<h1 v-show="!isShow" key="1">你好啊</h1>
			<h1 v-show="isShow" key="2">猪猪</h1>
		</transition-group>
	</div>
</template>

<script>
	import 'animate.css'           //第三方的库
	export default{
		name:'Test3',
		data(){
			return{
				isShow:true
			}
		}
	}
</script>

<style scoped>
	h1{
		background-color: plum;
	}
	
</style>

效果:

3