摘要：包括以下工具在過渡和動畫中自動應用可以配合第三方動畫庫，如在過渡鉤子函數中使用直接操作可以配合使用第三方動畫庫，如在這里，我們只會講到進入離開和列表的過渡。不僅可以進入和離開動畫，還可以改變定位。

Vue在插入、更新或則移除DOM時，提供多種不同方式的應用過渡效果。
包括以下工具：

*在CSS過渡和動畫中自動應用class
*可以配合第三方CSS動畫庫，如Animate.css
*在過渡鉤子函數中使用Javascript直接操作DOM
*可以配合使用第三方Javascript動畫庫，如Velocity.js

在這里，我們只會講到進入、離開和列表的過渡。

Vue提供了transition的封裝組件，在下列情形中，可以給任何元素和組件添加進入/離開過渡。

*條件渲染（使用v-if）
*條件展示（使用v-show）
*動態組件
*組件根節點

這里是一個典型的例子：

    
        Toggle
    
    
        
hello
    


new Vue({
    el:"#demo",
    data:{
        show:true
    }
})

//css
.fade-enter-active,.fade-leave-active{
    transition:opacity .5s;
}
.fade-enter,.fade-leave-to{
    opacity:0;
}

當插入或刪除包含在transition組件中的元素時，Vue將會做以下處理：

1.自動嗅探目標元素是否應用了CSS過渡或動畫，如果是，在恰當的時機添加/刪除CSS類名。
2.如果過渡組件提供了Javascript鉤子函數，這些鉤子函數將在恰當的時機被調用。
3.如果沒有找到JavaScript鉤子并且也沒有檢測到CSS過渡/動畫，DOM操作（插入/刪除）在下一幀中立即執行。（注意：此指瀏覽器逐幀動畫機制，和Vue的nextTick概念不同）

在進入/離開的過渡中，會有6個class切換。

1.v-enter：定義進入過渡的開始狀態。在元素被插入之前生效，在元素被插入之后下一幀移除。
2.v-enter-active:定義進入過渡生效時的狀態。在整個進入過渡的階段中應用，在元素被插入之前生效，在過渡/動畫完成之后移除。這個類可以被用來定義進入過渡的過程時間，延遲和曲線函數。
3.v-enter-to：2.1.8版及以上定義進入過渡的結束狀態。在元素被插入之后下一幀生效（與此同時v-enter被移除），在過渡/動畫完成之后移除。
4.v-leave：定義離開過渡的開始狀態。在離開過渡被觸發時立刻生效，下一幀移除。
5.v-leave-active：定義離開過渡生效時的狀態。在整個離開過渡的階段中應用，在離開過渡被觸發時立刻生效，在過渡/動畫完成之后移除。這個類可以被用來定義離開過渡的過程時間，延遲和曲線函數。
6.v-leave-to：2.1.8版本及以上定義離開過渡的結束狀態。在離開過渡被觸發之后下一幀生效（與此同時v-leave被刪除），在過渡/動畫完成之后移除。

對于這些在過渡中切換的類名來說，如果你使用一個沒有名字的,則v-是這些類名的默認前綴。如果你使用了,那么v-enter會替換為my-transition-enter。
v-enter-active和v-leave-active可以控制進入/離開過渡的不同的緩和曲線。

常用的過渡都是使用CSS過渡。
下面是一個簡單的例子：

    
        Toggle render
    
    
        
hello
    


new Vue({
    el:"#example-1",
    data:{
        show:true
    }
})

/*可以設置不同的進入和離開動畫*/
/*設置持續時間和動畫函數*/
.slide-fade-enter-active{
    transition:all .3s ease;
}
.slide-fade-leave-active{
    transition:all .8s cubic-bezier(1.0,0.5,0.8,1.0);
}
.slide-fade-enter,.slide-fade-leave-to{
    transform:translateX(10px);
    opacity:0;
}

CSS動畫用法同CSS過渡，區別是在動畫中v-enter類名在節點插入DOM后不會立即刪除，而是在animationend事件觸發時刪除。

    Toggle show
    
        
Lorem ipsum dolor sit amet,consectetur adipiscing elit.Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.
    


new Vue({
    el:"#example-2",
    data:{
        show:true
    }
})

.bounce-enter-active{
    animation:bounce-in .5s;
}
.bounce-leave-active{
    animation:bounce-in .5s reverse;
}
@keyframes bounce-in{
    0%{
        transform:scale(0);
    }
    50%{
        transition:scale(1.5);
    }
    100%{
        transition:scale(1);
    }
}

我們可以通過以下特性來自定義過渡類名：

*enter-calss
*enter-active-class
*enter-to-class
*leave-class
*leave-active-class
*leave-to-class

它們的優先級高于普通的類名，這對于Vue的過渡系統和其他第三方CSS動畫庫，如Animate.css結合使用十分有用。
示例：

  
    Toggle render
  
  
    
hello
  


new Vue({
  el: "#example-3",
  data: {
    show: true
  }
})

Vue為了知道過渡的完成，必須設置相應的事件監聽器。它可以是transitionend或animationend，這取決于給元素應用的CSS規則。如果你使用其中任何一種，Vue能自動識別類型并設置監聽。
但是，在一些場景中，你需要給同一個元素同時設置兩種過渡動效，比如animation很快的被觸發并完成了，而transition效果還沒結束。在這種情況中，你就需要使用type特性并設置animation或transition來明確聲明你需要Vue監聽的類型。

在很多情況下，Vue可以自動得出過渡效果的完成時機。默認情況下，Vue會等待其在過渡效果的根元素的第一個transitionend或animationend事件。然而也可以不這樣設定，比如，我們可以擁有一個精心編排的一系列過渡效果，其中一些嵌套的內部元素相比于過渡效果的根元素有延遲的或更長的過渡效果。
在這種情況下你可以用組件上的duration屬性定制一個顯性的過度持續時間（以毫秒計）：

...
你也可以定制進入和移除的持續時間：
...

可以在屬性中聲明JavaScript鉤子。

// ...
methods: {
  // --------
  // 進入中
  // --------

  beforeEnter: function (el) {
    // ...
  },
  // 當與 CSS 結合使用時
  // 回調函數 done 是可選的
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // 離開時
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // 當與 CSS 結合使用時
  // 回調函數 done 是可選的
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

這些鉤子函數可以結合 CSS transitions/animations 使用，也可以多帶帶使用。
當只用 JavaScript 過渡的時候，在 enter 和 leave 中必須使用 done 進行回調。否則，它們將被同步調用，過渡會立即完成。
推薦對于僅使用 JavaScript 過渡的元素添加 v-bind:css="false"，Vue 會跳過 CSS 的檢測。這也可以避免過渡過程中 CSS 的影響。
一個使用 Velocity.js 的簡單例子：

  
    Toggle
  
  
    

      Demo
    
  


new Vue({
  el: "#example-4",
  data: {
    show: false
  },
  methods: {
    beforeEnter: function (el) {
      el.style.opacity = 0
      el.style.transformOrigin = "left"
    },
    enter: function (el, done) {
      Velocity(el, { opacity: 1, fontSize: "1.4em" }, { duration: 300 })
      Velocity(el, { fontSize: "1em" }, { complete: done })
    },
    leave: function (el, done) {
      Velocity(el, { translateX: "15px", rotateZ: "50deg" }, { duration: 600 })
      Velocity(el, { rotateZ: "100deg" }, { loop: 2 })
      Velocity(el, {
        rotateZ: "45deg",
        translateY: "30px",
        translateX: "30px",
        opacity: 0
      }, { complete: done })
    }
  }
})

可以通過apper特性設置節點在初始渲染的過渡

這里默認和進入/離開過渡一樣，同樣也可以自定義CSS類名。

自定義JavaScript鉤子：

我們之后討論多個組件的過渡，對于原生標簽可以使用v-if/v-else。最常見的多標簽過渡是一個列表和描述這個列表為空消息的元素：

  
  
Sorry, no items found.

當有相同標簽名的元素切換時，需要通過key特性設置唯一的值來標記以上Vue區分它們，否則Vue為了效率只會替換相同標簽內部的內容。即使在技術上沒有必要，給在組件中的多個元素設置key是一個更好的實踐。
實例：

  
    Save
  
  
    Edit
  

在一些場景中，也可以通過給同一個元素key特性設置不同的狀態來代替v-if和v-else，上面的例子可以重寫為：

  
    {{ isEditing ? "Save" : "Edit" }}
  

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

  
    Edit
  
  
    Save
  
  
    Cancel
  

可以重寫為：

  
    {{ buttonMessage }}
  


computed: {
  buttonMessage: function () {
    switch (this.docState) {
      case "saved": return "Edit"
      case "edited": return "Save"
      case "editing": return "Cancel"
    }
  }
}

的默認行為-進入和離開同時發生。在元素絕對定位在彼此之上時運行正常。
同時生效的進入和離開的過渡不能滿足所有要求，所以Vue提供了過渡模式。

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

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

    

new Vue({
    el:"#transition-components-demo",
    data:{
        view:"v-a"
    },
    components:{
        "v-a":{
            template:"
Component A
"
        },
        "v-b":{
            template:"
Component B
"
        }
    }
})
.component-fade-enter-active, .component-fade-leave-active {
  transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active for below version 2.1.8 */ {
  opacity: 0;
}

## 列表過渡 ##
怎么同時渲染整個列表，比如使用v-for，在這種場景中，使用組件。在我們深入例子之前，先了解關于這個組件的幾個特點：

*不同于，它會以一個真實元素呈現：默認為一個。你也可以通過tag特性更換為其他元素。
*過渡模式不可用，因為我們不再相互切換特有的元素。
*內部元素總是需要提供唯一key屬性值。

列表的進入/離開過渡
現在讓我們由一個簡單的例子深入，進入和離開的過渡使用之前一樣CSS類名。

    Add
    Remove
    
        
            {{item}}
        
    


new Vue({
    el:"#list-demo",
    data:{
        items:[1,2,3,4,5,6,7,8,9],
        nextNum:10
    },
    methods:{
        randomIndex:function(){
            return Math.floor(Math.random()*this.items.length)
        },
        add:function(){
            this.items.splice(this.randomIndex(),0,this.nextNum++)
        },
        remove:function(){
            this.items.splice(this.randomIndex(),1)
        }
    }
})

.list-item{
    display:inline-block;
    margin-right:10px;
}
.list-enter-active,.list-leave-active{
    transition:all 1s;
}
.list-enter,.list-leave-to{
    opacity:0;
    transform:translateY(30px);
}

這個例子有個問題，當添加移除元素的時候，周圍的元素會瞬間移動到他們的新布局位置，而不是平滑的過渡，我們下面會解決這個問題。
《列表的排序過渡》
組件還有一個特殊之處。不僅可以進入和離開動畫，還可以改變定位。要使用這個新功能只需要了解新增的v-mode特性，它會在元素的改變定位的過程中應用。像之前的類名一樣，可以通過name屬性來自定義前綴，也可以通過move-class屬性手動設置。
v-move對于設置過渡的切換時機和過渡曲線非常有用，你會看到如下的例子：

    Shuffle
    
        

            {{item}}
        
    


new Vue({
    el:"#filp-list-demo",
    data:{
        items:[1,2,3,4,5,6,7,8,9]
    },
    methods:{
        shuffle:function(){
            this.items=_.shuffle(this.items)
        }
    }
})

.flip-list-move{
    transition:transform 1s;
}