同时使用

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 >
 <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" >
<div >
 <button @click="show = !show">
  Toggle render
 </button>
 <transition name="xxx" enter-active-class="animated tada" leave-active-class="animated bounceOutRight">
  <p v-if="show">蓝色理想</p>
 </transition>
</div>
<script src="https://www.jb51.com/vue"></script>
<script>
new Vue({
 el: '#example',
 data: {
  show: true
 }
})
</script>

初始渲染过渡

可以通过 appear 特性设置节点的在初始渲染的过渡

<transition appear>
 <!-- ... -->
</transition>

这里默认和进入和离开过渡一样，同样也可以自定义 CSS 类名

<transition
 appear
 appear-class="custom-appear-class"
 appear-to-class="custom-appear-to-class" 
 appear-active-class="custom-appear-active-class"
>
 <!-- ... -->
</transition>

下面是一个例子

<style>
.custom-appear-class{
 opacity:0;
 background-color:pink;
 transform:translateX(100px);
} 
.custom-appear-active-class{
 transition: 2s;
}
</style>
<div >
 <button @click="reset">还原</button>
 <transition appear  appear-class="custom-appear-class"
 appear-to-class="custom-appear-to-class" 
 appear-active-class="custom-appear-active-class">
  <p>蓝色理想</p>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',
 methods:{
  reset(){
   history.go();
  }
 }
})
</script>

过渡时间

在很多情况下，Vue可以自动得出过渡效果的完成时机。默认情况下，Vue会等待其在过渡效果的根元素的第一个 transitionend 或 animationend 事件。然而也可以不这样设定——比如，可以拥有一个精心编排的一序列过渡效果，其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果