Vue实现动画的几种方式

除了原生的js方法实现动画效果之外，在vue中还有两种常用的动画方法。

1.vue内置组件transition

通过点击事件控制元素隐藏显示
在需要加动画的元素外添加transition标签，并添加一个名字name=“fade”。

<transition name="fade">
  <div v-if="show"></div>
</transition>
<button @click="toggle">点击动画</button>

在css样式中添加动画修饰，实现淡入淡出效果。

.fade-enter{
	opacity:0
}
.fade-enter-to{
	opacity:1
}
.fade-enter-active{
	transition:all 1s
}
.fade-leave{
	opacity:1
}
.fade-leave-to{
	opacity:0
}
.fade-leave-active{
	transition:all 1s
}

在methods方法中添加按钮的点击事件，就可以实现元素的淡入淡出效果。

data(){
	return {
		show:true
	}
},
methods:{
	toggle(){
		this.show = !this.show
	}
}

如果在transition标签内有多个元素，则要把transition标签换成transition-group，并且要在标签内部的元素上添加不同的key值。

<transition-group name="fade">
  <div v-if="show" key=1></div>
  <div v-if="show" key=2></div>
  <div v-if="show" key=3></div>
</transition-group>
<button @click="toggle">点击动画</button>

2. 引用animate.css插件

首先需要使用npm install animate.css命令下载插件，在node_moudles里面找到animate.css样式。

动画插件可能会在整个项目中使用，所以我在main.js文件中引入，接着在需要使用插件的元素外面添加transition标签，在标签内写enter-active-class和leave-active-class两个属性，其中这里的slideInRight和bounceOutRight代表动画名称，animated表示动画过渡时间。

<transition
	enter-active-class='slideInRight animated'
	leave-active-class='bounceOutRight animated'
>
<div v-if="show"></div>
</transition>

在animate.css官网有很多具体的动画效果演示，选择喜欢的直接写在动画属性里就可以了。