<p v-if="show">蓝色理想</p>
</transition>
</div>
<script>
new Vue({
el: '#demo',
data: {
show: true
}
})
</script>
animation
CSS动画animation用法同CSS过渡transition，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除
下面例子中，在元素enter和leave时都增加缩放scale效果
<style>
.bounce-enter-active{
animation:bounce-in .5s;
}
.bounce-leave-active{
animation:bounce-in .5s reverse;
}
@keyframes bounce-in{
0%{transform:scale(0);}
50%{transform:scale(1.5);}
100%{transform:scale(1);}
}
</style>
<div id="demo">
<button v-on:click="show = !show">Toggle</button>
<transition name="bounce">
<p v-if="show">蓝色理想</p>
</transition>
</div>
<script>
new Vue({
el: '#demo',
data: {
show: true
}
})
</script>同时使用
Vue 为了知道过渡的完成，必须设置相应的事件监听器。它可以是 transitionend 或 animationend ，这取决于给元素应用的 CSS 规则。如果使用其中任何一种，Vue 能自动识别类型并设置监听。
但是，在一些场景中，需要给同一个元素同时设置两种过渡动效，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。在这种情况中，就需要使用 type 特性并设置 animation 或 transition 来明确声明需要 Vue 监听的类型
<style>
.fade-enter,.fade-leave-to{
opacity:0;
}
.fade-enter-active,.fade-leave-active{
transition:opacity 1s;
animation:bounce-in 5s;
}
@keyframes bounce-in{
0%{transform:scale(0);}
50%{transform:scale(1.5);}
100%{transform:scale(1);}
}
</style>
<div id="demo">
<button v-on:click="show = !show">Toggle</button>
<transition name="fade" type="transition">
<p v-if="show">蓝色理想</p>
</transition>
</div>
<script>
new Vue({
el: '#demo',
data: {
show: true,
},
})
</script>自定义类名
可以通过以下特性来自定义过渡类名
enter-class
enter-active-class
enter-to-class
leave-class
leave-active-class
leave-to-class
自定义类名的优先级高于普通的类名，这对于Vue的过渡系统和其他第三方CSS动画库，如 Animate.css 结合使用十分有用
<link rel="stylesheet" href="https://unpkg.com/animate.css@3.5.2/animate.min.css" rel="external nofollow" >
