在此之前，我们已经有了过渡动画以及@keyframes动画的基础，但往往能够单独使用他们是不够的，我们需要将二者结合

关于初次加载元素

在animate.css的代码基础上我们可以发现，当页面第一次渲染元素时，并没有出场动画，为了解决这个问题我们需要再添加两个属性

<div id="root">
	<transition 
	name="fade"
	appear 
	enter-active-class="animated swing"
	leave-active-class="animated shake"
	appear-active-class="animated swing"
	>
		<div v-show = "show">Good Moring</div>
	</transition>
	<button @click="handleClick">戳一戳</button>
</div>

对比代码可以看出，我们添加了appear和appear-active-class两个属性，这两个属性的意思是我们在元素出现时也有一个动画效果，这个动画效果与我们点击后出现的动画效果保持一致即可

过渡与animate结合

在页面搭建时，我们往往需要将两种动画效果相结合，过渡是通过transition来实现，而animate是通过 @keyframes 来实现

step1：搭建一个animate动画效果的代码结构

step2：给自定义的class名添加我们在过渡动画时使用的class名

enter-active-class="animated swing fade-enter-active" 
leave-active-class="animated shake fade-leave-active"

step3:根据过渡动画的内容添加CSS样式

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

叠加动画效果的时间问题

在这里我们使用了两个动画效果，那这时动画的持续时间到底服从哪一个则没有定论，所以我们需要对此进行设置

type

在上述例子中，过渡动画持续了3s，animate持续为1s，我们以长的时间为例，在transition标签内添加type属性

<transition type="transition"></transition>

这样动画的持续效果即由过渡动画决定，即为3s

duration

我们也可以自定义动画的时长，在transition标签内添加:duration

<transition :duration="1000"></transition>

这里的数字所代表的时间单位为ms

我们也可以对出现和消失动画的时长分别设置

<transition  :duration="{enter:5000,leave:5000}"></transition>

完整代码展示

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

<div id="root">
	<transition 
	:duration="{enter:5000,leave:5000}"
	type="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-show = "show">Good Moring</div>
	</transition>
	<button @click="handleClick">戳一戳</button>
</div>

<script type="text/javascript">
	var vm = new Vue({
		el:'#root',
		data:{
			show:true
		},
		methods:{
			handleClick:function(){
				this.show = ! this.show;
			}
		}
	})
</script>

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