常見示例

最常見的多標籤過渡是一個列表和描述這個列表為空訊息的元素：

<transition>
 <table v-if="items.length > 0">
  <!-- ... -->
 </table>
 <p v-else>Sorry,no items found.</p>
</transition>

下面是一個例子

<style>
.fade-enter,.fade-leave-to{opacity:0;}
.fade-enter-active,.fade-leave-active{transition:opacity .5s;}
</style>
<div id="demo">
 <button @click="clear">清空資料</button> 
 <button @click="reset">重置</button>  
 <transition name="fade">
  <ul v-if="items.length > 0">
   <li v-for="item in items">{{item}}</li>
  </ul>
  <p v-else>Sorry,no items found.</p>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',data: {
  items: ['html','css','js']
 },methods:{
  clear(){
   this.items.splice(0);
  },reset(){
   history.go();
  }
 }
})
</script>

同標籤名稱

如果是相同標籤名的元素切換時，Vue 為了效率只會替換相同標籤內部的內容

<style>
.fade-enter,.fade-leave-active{transition:opacity .5s;}
</style>
<div id="demo">
 <button @click="show = !show">toggle</button>  
 <transition name="fade">
  <p v-if="show">Jb51</p>
  <p v-else>JB51</p>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',data: {
  show:true
 },})
</script>

由下面的示例可知，兩個相同的p元素切換時，無過渡效果

因此，對於具有相同標籤名的元素切換的情況，需要通過 key 特性設定唯一的值來標記以讓 Vue 區分它們　

<div id="demo">
 <button @click="show = !show">toggle</button>  
 <transition name="fade">
  <p v-if="show" key="trueMatch">Jb51</p>
  <p v-else key="falseMatch">JB51</p>
 </transition>
</div>

替代if

在一些場景中，可以給通過給同一個元素的 key 特性設定不同的狀態來代替 v-if 和 v-else

<transition>
 <button v-if="isEditing" key="save">Save</button>
 <button v-else key="edit">Edit</button>
</transition>

上面的例子可以重寫為

<transition>
 <button v-bind:key="isEditing">
  {{ isEditing ? 'Save' : 'Edit' }}
 </button>
</transition>

下面是一個例子

<style>
.fade-enter,.fade-leave-active{transition:opacity .5s;}
</style>
<div id="demo">
 <button @click="isEditing = !isEditing">toggle</button>  
 <transition name="fade">
  <p v-bind:key="isEditing">
   {{ isEditing ? 'Save' : 'Edit' }}
  </p>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',data: {
  isEditing:true
 },})
</script>

使用多個 v-if 的多個元素的過渡可以重寫為綁定了動態屬性的單個元素過渡

<transition>
 <button v-if="docState === 'saved'" key="saved">Edit</button>
 <button v-if="docState === 'edited'" key="edited">Save</button>
 <button v-if="docState === 'editing'" key="editing">Cancel</button>
</transition>

可以重寫為

<transition>
 <button v-bind:key="docState">{{ buttonMessage }}</button>
</transition>
computed: {
 buttonMessage: function () {
  switch (this.docState) {
   case 'saved': return 'Edit'
   case 'edited': return 'Save'
   case 'editing': return 'Cancel'
  }
 }
}

下面是一個例子

<style>
.fade-enter,.fade-leave-active{transition:opacity .5s;}
</style>
<div id="demo">
 <button @click="change">change</button>  
 <transition name="fade">
  <p v-bind:key="docState">{{ message }}</p>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',data: {
  index:0,isEditing:true,arr:['saved','edited','editing']
 },computed: {
  docState(){
   return this.arr[this.index];
  },message() {
   switch (this.docState) {
    case 'saved': return 'Edit'
    case 'edited': return 'Save'
    case 'editing': return 'Cancel'
   }
  }
 },methods:{
  change(){
   this.index = (++this.index)%3;
  }
 } 
})
</script>

過渡模式

先看下面這個例子

<style>
.fade-enter,.fade-leave-active{transition:opacity .5s;}
</style>
<div id="demo">  
 <transition name="fade">
  <button :key="isOn" @click="isOn = !isOn">{{ isOn ? 'On' : 'Off' }}</button>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',data: {
  isOn: true
 },})
</script>

在 “on” 按鈕和 “off” 按鈕的過渡中，兩個按鈕都被重繪了，一個離開過渡的時候另一個開始進入過渡。這是 <transition> 的預設行為 - 進入和離開同時發生

同時生效的進入和離開的過渡不能滿足所有要求，所以 Vue 提供了過渡模式

in-out: 新元素先進行過渡，完成之後當前元素過渡離開。

out-in: 當前元素先進行過渡，完成之後新元素過渡進入。

in-out

下面使用in-out來重寫之前的開關按鈕過渡

<div id="demo">  
 <transition name="fade" mode="in-out">
  <button :key="isOn" @click="isOn = !isOn">{{ isOn ? 'On' : 'Off' }}</button>
 </transition>
</div>

out-in

下面使用out-in來重寫之前的開關按鈕過渡

<div id="demo">  
 <transition name="fade" mode="out-in">
  <button :key="isOn" @click="isOn = !isOn">{{ isOn ? 'On' : 'Off' }}</button>
 </transition>
</div>

滑動過渡

當元素設定為絕對定位，並互相覆蓋，實現透明度過渡效果

<style>
#demo{position:relative;}
#demo button{position:absolute;left:40px;}
.fade-enter,.fade-leave-active{transition: 1s;}
</style>
<div id="demo">  
 <transition name="fade" >
  <button :key="isOn" @click="isOn = !isOn">{{ isOn ? 'On' : 'Off' }}</button>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',})
</script>

下面是一個使用absolute和translate實現的類似滑動 

<style>
#demo{position:relative;}
#demo button{position:absolute;left:40px;}
.fade-enter,.fade-leave-to{opacity:0;}
.fade-enter{transform:translateX(30px);}
.fade-leave-to{transform:translateX(-30px);} 
.fade-enter-active,.fade-leave-active{transition: 1s;}
</style>

如果設定in-out模式，將實現更酷的滑動效果

<style>
#demo{position:relative;}
#demo button{position:absolute;left:40px;}
.fade-enter,.fade-leave-active{transition: 1s;}
</style>
<div id="demo">  
 <transition name="fade" mode="in-out">
  <button :key="isOn" @click="isOn = !isOn">{{ isOn ? 'On' : 'Off' }}</button>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',})
</script>

多元件過渡

多個元件的過渡簡單很多，不需要使用 key 特性。相反，只需要使用動態元件

下面是一個例子

<style>
.fade-enter,.fade-leave-active{transition: .5s;}
</style>
<div id="example">
 <button @click="change">切換頁面</button>
 <transition name="fade" mode="out-in">
  <component :is="currentView"></component>
 </transition>
</div>
<script>
new Vue({
 el: '#example',data:{
  index:0,arr:[
   {template:`<div>ComponentA</div>`},{template:`<div>ComponentB</div>`},{template:`<div>ComponentC</div>`}
  ],},computed:{
  currentView(){
    return this.arr[this.index];
  }
 },methods:{
  change(){
   this.index = (++this.index)%3;
  }
 }
})

更多關於Vue過渡動畫的文章大家可以檢視下面的相關連結