在trasition标签中加入enter-active-class=”动画类名 animated” leave-active-class=”animated 动画类名”来指定动画类型,:duration=”毫秒”指定动画执行时间,这样指定的入场和离场时间是一样的,可以分开指定:duration=”{enter: 200, leave: 400}”
<body>
<div id="app">
<button v-on:click="flag=!flag">切换</button>
<!-- <transition enter-active-class="bounceIn animated" leave-active-class="animated bounceOut" :duration="200">
<h1 v-if="flag">看见了</h1>
</transition> -->
<transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{enter: 200, leave: 800}">
<h1 v-if="flag" class="animated">看见了</h1>
</transition>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
flag: false
}
})
</script>
</body>