基本代码准备

如果具备基础的animate.css库和动画原理知识，我们先看下面的代码：（如果不明白：juejin.cn/post/684490…

<body>
	<div id="root">
		<transition name="fade"
			enter-active-class="animated swing" 
			leave-active-class="animated shake">
		<div v-if="show">hello vue.js</div>
		</transition>
		<button @click="handleclick">switch</button>
	</div>

	<script type="text/javascript">
		var vm =new Vue({
			el:'#root',
			data:{
				show:true
			},
			methods:{
				handleclick:function(){
					this.show=(this.show === true?false:true)/*或者 this.show = !this.show*/
				}
			}
		})
	</script>
</body>

appear属性

然后我们想在每次刷新时出现一个动画效果，便可使用appear-active-class来增添动画效果：

<div id="root">
	<transition name="fade"
		appear 
		enter-active-class="animated swing"
		appear-active-class="animated swing" 
		leave-active-class="animated shake">
	<div v-if="show">hello vue.js</div>
	</transition>
	<button @click="handleclick">switch</button>
</div>

不要忘了，在transition中务必新增一个属性：appear。

在过渡的同时使用动画

修改自定义class名

在自定义的动画class名中后面再加上fade-enter-active:

<transition name="fade"
	appear 
	enter-active-class="animated swing fade-enter-active"
	leave-active-class="animated shake fade-leave-active"
	appear-active-class="animated swing">
<div v-if="show">hello vue.js</div>
</transition>

css中设定过渡动画

设定值的具体原因在：juejin.cn/post/684490… 中有讲

<style type="text/css">
	.fade-enter,.fade-leave-to{
		opacity: 0;
	}
	.fade-enter-active,.fade-leave-active{
		transition:opacity 3s;
	}
</style>

这样我们就可以在使用过渡的同时使用动画了

动画时长

运行上面的代码，我们会发现在消失过程中，先进行完 animate.css 库中1s的shake，然后执行我们设计的3s消失的动画。

那么我们可以通过添加type="transition"，将持续时长统一为“transition”动画的时长

我们也可以自定义整个动画的时长：通过在<transition>中添加:duration"毫秒"属性定义时长，单位毫秒。

当然，我们还可以精确控制每个动画的时长：:duration="{enter:2000,leave:8000}"

Vue动画之同时使用过渡和动画