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

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

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

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

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

*條件渲染（使用v-if）
*條件展示（使用v-show）
*動態(tài)組件
*組件根節(jié)點

這里是一個典型的例子：

    
        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過渡或動畫，如果是，在恰當?shù)臅r機添加/刪除CSS類名。
2.如果過渡組件提供了Javascript鉤子函數(shù)，這些鉤子函數(shù)將在恰當?shù)臅r機被調(diào)用。
3.如果沒有找到JavaScript鉤子并且也沒有檢測到CSS過渡/動畫，DOM操作（插入/刪除）在下一幀中立即執(zhí)行。（注意：此指瀏覽器逐幀動畫機制，和Vue的nextTick概念不同）

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

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

/*可以設置不同的進入和離開動畫*/
/*設置持續(xù)時間和動畫函數(shù)*/
.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過渡，區(qū)別是在動畫中v-enter類名在節(jié)點插入DOM后不會立即刪除，而是在animationend事件觸發(fā)時刪除。

    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

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

  
    Toggle render
  
  
    
hello
  


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

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

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

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

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

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

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

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

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

這些鉤子函數(shù)可以結(jié)合 CSS transitions/animations 使用，也可以多帶帶使用。
當只用 JavaScript 過渡的時候，在 enter 和 leave 中必須使用 done 進行回調(diào)。否則，它們將被同步調(diào)用，過渡會立即完成。
推薦對于僅使用 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特性設置節(jié)點在初始渲染的過渡

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

自定義JavaScript鉤子：

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

  
  
Sorry, no items found.

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

  
    Save
  
  
    Edit
  

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

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

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

  
    Edit
  
  
    Save
  
  
    Cancel
  

可以重寫為：

  
    {{ buttonMessage }}
  


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

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

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

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

    

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，在這種場景中，使用組件。在我們深入例子之前，先了解關(guān)于這個組件的幾個特點：

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

列表的進入/離開過渡
現(xiàn)在讓我們由一個簡單的例子深入，進入和離開的過渡使用之前一樣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;
}