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

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

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

在這里，我們只會(huì)講到進(jìn)入、離開(kāi)和列表的過(guò)渡。

Vue提供了transition的封裝組件，在下列情形中，可以給任何元素和組件添加進(jìn)入/離開(kāi)過(guò)渡。

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

這里是一個(gè)典型的例子：

    
        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;
}

當(dāng)插入或刪除包含在transition組件中的元素時(shí)，Vue將會(huì)做以下處理：

1.自動(dòng)嗅探目標(biāo)元素是否應(yīng)用了CSS過(guò)渡或動(dòng)畫(huà)，如果是，在恰當(dāng)?shù)臅r(shí)機(jī)添加/刪除CSS類(lèi)名。
2.如果過(guò)渡組件提供了Javascript鉤子函數(shù)，這些鉤子函數(shù)將在恰當(dāng)?shù)臅r(shí)機(jī)被調(diào)用。
3.如果沒(méi)有找到JavaScript鉤子并且也沒(méi)有檢測(cè)到CSS過(guò)渡/動(dòng)畫(huà)，DOM操作（插入/刪除）在下一幀中立即執(zhí)行。（注意：此指瀏覽器逐幀動(dòng)畫(huà)機(jī)制，和Vue的nextTick概念不同）

在進(jìn)入/離開(kāi)的過(guò)渡中，會(huì)有6個(gè)class切換。

1.v-enter：定義進(jìn)入過(guò)渡的開(kāi)始狀態(tài)。在元素被插入之前生效，在元素被插入之后下一幀移除。
2.v-enter-active:定義進(jìn)入過(guò)渡生效時(shí)的狀態(tài)。在整個(gè)進(jìn)入過(guò)渡的階段中應(yīng)用，在元素被插入之前生效，在過(guò)渡/動(dòng)畫(huà)完成之后移除。這個(gè)類(lèi)可以被用來(lái)定義進(jìn)入過(guò)渡的過(guò)程時(shí)間，延遲和曲線(xiàn)函數(shù)。
3.v-enter-to：2.1.8版及以上定義進(jìn)入過(guò)渡的結(jié)束狀態(tài)。在元素被插入之后下一幀生效（與此同時(shí)v-enter被移除），在過(guò)渡/動(dòng)畫(huà)完成之后移除。
4.v-leave：定義離開(kāi)過(guò)渡的開(kāi)始狀態(tài)。在離開(kāi)過(guò)渡被觸發(fā)時(shí)立刻生效，下一幀移除。
5.v-leave-active：定義離開(kāi)過(guò)渡生效時(shí)的狀態(tài)。在整個(gè)離開(kāi)過(guò)渡的階段中應(yīng)用，在離開(kāi)過(guò)渡被觸發(fā)時(shí)立刻生效，在過(guò)渡/動(dòng)畫(huà)完成之后移除。這個(gè)類(lèi)可以被用來(lái)定義離開(kāi)過(guò)渡的過(guò)程時(shí)間，延遲和曲線(xiàn)函數(shù)。
6.v-leave-to：2.1.8版本及以上定義離開(kāi)過(guò)渡的結(jié)束狀態(tài)。在離開(kāi)過(guò)渡被觸發(fā)之后下一幀生效（與此同時(shí)v-leave被刪除），在過(guò)渡/動(dòng)畫(huà)完成之后移除。

對(duì)于這些在過(guò)渡中切換的類(lèi)名來(lái)說(shuō)，如果你使用一個(gè)沒(méi)有名字的,則v-是這些類(lèi)名的默認(rèn)前綴。如果你使用了,那么v-enter會(huì)替換為my-transition-enter。
v-enter-active和v-leave-active可以控制進(jìn)入/離開(kāi)過(guò)渡的不同的緩和曲線(xiàn)。

常用的過(guò)渡都是使用CSS過(guò)渡。
下面是一個(gè)簡(jiǎn)單的例子：

    
        Toggle render
    
    
        
hello
    


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

/*可以設(shè)置不同的進(jìn)入和離開(kāi)動(dòng)畫(huà)*/
/*設(shè)置持續(xù)時(shí)間和動(dòng)畫(huà)函數(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動(dòng)畫(huà)用法同CSS過(guò)渡，區(qū)別是在動(dòng)畫(huà)中v-enter類(lèi)名在節(jié)點(diǎn)插入DOM后不會(huì)立即刪除，而是在animationend事件觸發(fā)時(shí)刪除。

    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);
    }
}

我們可以通過(guò)以下特性來(lái)自定義過(guò)渡類(lèi)名：

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

它們的優(yōu)先級(jí)高于普通的類(lèi)名，這對(duì)于Vue的過(guò)渡系統(tǒng)和其他第三方CSS動(dòng)畫(huà)庫(kù)，如Animate.css結(jié)合使用十分有用。
示例：

  
    Toggle render
  
  
    
hello
  


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

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

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

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

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

// ...
methods: {
  // --------
  // 進(jìn)入中
  // --------

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

  // --------
  // 離開(kāi)時(shí)
  // --------

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

這些鉤子函數(shù)可以結(jié)合 CSS transitions/animations 使用，也可以多帶帶使用。
當(dāng)只用 JavaScript 過(guò)渡的時(shí)候，在 enter 和 leave 中必須使用 done 進(jìn)行回調(diào)。否則，它們將被同步調(diào)用，過(guò)渡會(huì)立即完成。
推薦對(duì)于僅使用 JavaScript 過(guò)渡的元素添加 v-bind:css="false"，Vue 會(huì)跳過(guò) CSS 的檢測(cè)。這也可以避免過(guò)渡過(guò)程中 CSS 的影響。
一個(gè)使用 Velocity.js 的簡(jiǎn)單例子：

  
    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 })
    }
  }
})

可以通過(guò)apper特性設(shè)置節(jié)點(diǎn)在初始渲染的過(guò)渡

這里默認(rèn)和進(jìn)入/離開(kāi)過(guò)渡一樣，同樣也可以自定義CSS類(lèi)名。

自定義JavaScript鉤子：

我們之后討論多個(gè)組件的過(guò)渡，對(duì)于原生標(biāo)簽可以使用v-if/v-else。最常見(jiàn)的多標(biāo)簽過(guò)渡是一個(gè)列表和描述這個(gè)列表為空消息的元素：

  
  
Sorry, no items found.

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

  
    Save
  
  
    Edit
  

在一些場(chǎng)景中，也可以通過(guò)給同一個(gè)元素key特性設(shè)置不同的狀態(tài)來(lái)代替v-if和v-else，上面的例子可以重寫(xiě)為：

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

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

  
    Edit
  
  
    Save
  
  
    Cancel
  

可以重寫(xiě)為：

  
    {{ buttonMessage }}
  


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

的默認(rèn)行為-進(jìn)入和離開(kāi)同時(shí)發(fā)生。在元素絕對(duì)定位在彼此之上時(shí)運(yùn)行正常。
同時(shí)生效的進(jìn)入和離開(kāi)的過(guò)渡不能滿(mǎn)足所有要求，所以Vue提供了過(guò)渡模式。

*in-out:新元素先進(jìn)入過(guò)渡，完成之后當(dāng)前元素過(guò)渡離開(kāi)。
*out-in：當(dāng)前元素先進(jìn)行過(guò)渡，完成之后新元素過(guò)渡進(jìn)入。

多個(gè)組件的過(guò)渡簡(jiǎn)單很多-我們不需要使用key特性。相反，我們只需要使用動(dòng)態(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;
}

## 列表過(guò)渡 ##
怎么同時(shí)渲染整個(gè)列表，比如使用v-for，在這種場(chǎng)景中，使用組件。在我們深入例子之前，先了解關(guān)于這個(gè)組件的幾個(gè)特點(diǎn)：

*不同于，它會(huì)以一個(gè)真實(shí)元素呈現(xiàn)：默認(rèn)為一個(gè)。你也可以通過(guò)tag特性更換為其他元素。
*過(guò)渡模式不可用，因?yàn)槲覀儾辉傧嗷デ袚Q特有的元素。
*內(nèi)部元素總是需要提供唯一key屬性值。

列表的進(jìn)入/離開(kāi)過(guò)渡
現(xiàn)在讓我們由一個(gè)簡(jiǎn)單的例子深入，進(jìn)入和離開(kāi)的過(guò)渡使用之前一樣CSS類(lèi)名。

    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);
}

這個(gè)例子有個(gè)問(wèn)題，當(dāng)添加移除元素的時(shí)候，周?chē)脑貢?huì)瞬間移動(dòng)到他們的新布局位置，而不是平滑的過(guò)渡，我們下面會(huì)解決這個(gè)問(wèn)題。
《列表的排序過(guò)渡》
組件還有一個(gè)特殊之處。不僅可以進(jìn)入和離開(kāi)動(dòng)畫(huà)，還可以改變定位。要使用這個(gè)新功能只需要了解新增的v-mode特性，它會(huì)在元素的改變定位的過(guò)程中應(yīng)用。像之前的類(lèi)名一樣，可以通過(guò)name屬性來(lái)自定義前綴，也可以通過(guò)move-class屬性手動(dòng)設(shè)置。
v-move對(duì)于設(shè)置過(guò)渡的切換時(shí)機(jī)和過(guò)渡曲線(xiàn)非常有用，你會(huì)看到如下的例子：

    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;
}