摘要：在離開進入過渡時，受影響的其他元素應該使用移動過渡為期定義移動過渡。過渡和動畫自定義過渡的類名在鉤子中使用兩個元素之間的過渡今日頭條面試分享面試題記錄記得點贊分享哦讓更多的人看到這里使用了一個動畫庫和函數式組件。

另一種情況和Vue過渡執行過程見初始渲染

new Vue({
    el: "#app-2",
    data: {
        taxiCalled: false
    }
})

    
        Call a cab
    
    
        
?
    

這個過程到底發生了什么？

當點擊按鈕時，texiCalled被設置成true，并且taxi插入頁面。實際上在完成這些動作之前，Vue讀取了指定的類enter-class（這里為slideInRight）并把它應用于taxi的外包元素p，然后指定類enter-active-class的情況是一樣的。

類enter-class在第一幀之后就被移除了，類enter-active-class也在動畫結束時被移除。

這種創建動畫的方式成為FLIP

First(F):動畫第一幀的狀態；這里既是taxi在屏幕的右邊開始。

Last(L): 動畫最后幀的狀態；這里taxi在屏幕的最左邊作為結束。

Invert(I): 使用transform和opacity在第一幀和最后幀兩個狀態之間扭轉，這里使用translateX(300px)使taxi在兩個狀態間產生300px的位移。

Play(p): 為我們設置的屬性創建過渡，這里在2s內使taxi從右到左產生了300px的位移。

new Vue({
    el: "#app-3",
    data: {
        taxiCalled: false
    },
    methods: {
        enter(el, done) {
            Velocity(el,
                { opacity: [1, 0], translateX: ["0px", "200px"] },
                { duration: 2000, easing: "ease-out", complete: done })
        },
        leave(el, done) {
            Velocity(el,
                { opacity: [0, 1], "font-size": ["0.1em", "1em"] },
                { duration: 200, complete: done })
        }
    }
})

    
        Call a cab
    
    
        Cancel
    
    
        
?
    

抓取enter、leave和appear三種情況的時間點，每種情況上都定義了四種事件，總計12種事件（見API）。在這12種事件綁定鉤子函數，這些函數可以配合CSS模式使用，也可以多帶帶使用。這里我們在鉤子函數中使用velocity腳本動畫引擎，多帶帶完成動畫配置。

在這些鉤子中不一定非要使用velocity，可以使用任何庫。

上面代碼中:css="false"是告訴Vue，我們關閉CSS的處理，這里可以節省點CPU時間，將跳過所有與CSS動畫相關代碼，單純的使用Javascript動畫。

我們這里分別在@enter和@leave上綁定了鉤子函數，他們將在taxi被插入和離開時執行。函數的第一個參數為外包標簽（這里是

），第二個參數done必須寫，盡管你可能不去用它。這是因為用Javascript代替CSS，Vue無法識別動畫什么時候完成，這里Vue會認為這個離開的動畫在@leave事件之前就完成了，所以執行leave沒有動畫渲染。

關于velocity，這種類型的API，我們稱為forcefeeding，我們只要往它的實例中填寫數據，不管他內部如何運行。（具體查看velocity）

在使用appear特性，在組件第一次被插入時執行相關的轉換。
使用它會給人帶來一種頁面很快的加載大量元素的感覺（錯覺）。

這里還使用了的name特性，可以使用自定義的類名（"自定義過渡的類名"的相似寫法），
name-enter-active、name-enter等。
而使用這種自定義類名是一種好習慣。

    
        
        
    
    
在組件第一次插入文檔時執行相關的過渡

img {
    float: left;
    padding: 5px
}
.flip-enter-active {
    transition: all 5s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.flip-enter {
    transform: scaleY(0) translateZ(0);
    opacity: 0;
}

以上整個過程如下：
Vue發現appear特性，開始查找標簽中的JavaScript鉤子或指定的CSS類名。之后如果有一個name被指定，就根據這個name查到過渡的入口:mySpecifiedName-enter、mySpecifiedName-enter-active等。
如果以上過程失敗，就會找默認的v-enter、v-enter-active等。

new Vue({
    el:"#app-5",
    data:{
        kisses: 0
    }
})

#app-5 button span {
    color: rgb(255, 0, 140);
}
#app-5 p {
    margin: 0;
    position: absolute;
    font-size: 3em;
}
.fade-enter-active {
    transition: opacity 5s
}
.fade-leave-active {
    transition: opacity 5s;
    opacity: 0
}
.fade-enter {
    opacity: 0
}

    
        ?Kiss!
    
        
? frog
        
? princess
    

結果發現切換后沒任何過渡效果，原因是什么呢？
原來是，Vue會啟動自身的優化系統，發現兩個元素一模一樣，就是內容不同，因此當切換時，只做了內容的替換，標簽

    
? frog
    
? princess

過渡效果正常了。

最佳實踐，在元素上使用key，尤其是當元素間具有不同的語義時。

在有兩個以上元素時，你可能這么做:

    
? frog
    
? princess
    
? santa

更好的方法是我們可以根據已有的數據動態的處理多元素過渡。

new Vue({
    el: "#app-6",
    data: {
        kisses: 0,
        kindOfTransformation: "fade",
        transformationMode: "in-out"
    },
    computed: {
        transformation() {
            if (this.kisses < 3) {
                return "frog"
            }
            if (this.kisses >= 3 && this.kisses <= 5) {
                return "princess"
            }
            if (this.kisses > 5) {
                this.kindOfTransformation = "zoom"
                this.transformationMode = "out-in"
                return "santa"
            }
        },
        emoji() {
            switch (this.transformation) {
                case "frog":
                    return "?"
                case "princess":
                    return "?"
                case "santa":
                    return "?"
            }
        }
    }
})

    ?Kiss!
    
        
{{emoji}} {{transformation}}
    

以上過渡的name、mode以及元素的key和內容，都將根據實例數據與計算屬性進行動態的綁定。
這樣做更加的靈活，并且可以為不同的元素應用不同的過渡（name和mode的不同）。

這里的mode有三種情況:

不設置 舊元素離開過渡效果和新元素的進入過渡效果同時發生

in-out 新元素進入過渡先進行，完畢后舊元素的離開過渡效果再發生 如下面公主先進入，青蛙后消失

out-in 舊元素離開過渡先進行，完畢后新元素的進入過渡效果再發生 如下面公主先消失，圣誕老人后進入

再來看一個過渡模式的例子。

new Vue({
    el: "#app-7",
    data: {
        product: 0,
        products: ["?umbrella", "?computer", "?ball", "?camera"]
    }
})

#app-7 {
    margin-left:300px;
}

#app-7 p {
    position: absolute;
    margin: 0;
    font-size: 3em;
}
.slide-enter-active {
    transition: transform .5s
}
.slide-leave-active {
    transition: transform .5s;
    transform: translateX(-300px);
}
.slide-enter {
    transform: translateX(300px)
}

    next
    
        
{{products[product % 4]}}
    

這似乎沒什么問題。那么現在修改下CSS，去掉絕對定位。

#app-7 p {
    /* position: absolute; */
    margin: 0;
    font-size: 3em;
}

再來看看結果。

似乎是有點不對勁，為什么會這樣呢？

看看過渡執行時的DOM，發現前后兩個元素的過渡是同時進行，這是Vue的默認情況，即兩個

這下過渡模式mode就派上用處了，我們為過渡添加mode屬性為out-in，舊先出新后進。

    
{{products[product % 4]}}

列表過渡的情況比較復雜。一個問題一個問題看吧。

當中有多個并列的元素時，我們又沒有使用v-if|else指令作用其上時，會警告我們使用標簽代替它。
一組列表的過渡效果，由包圍，有幾點比單元素過渡特殊的。

在上設置tag屬性外包多個元素，如

在內部以v-for把元素渲染成列表形式

每個內部的元素需要使用:key="data"標記以與它的同胞們作區分

過渡的狀態不止于進入/離開，多了一個移動，使用name-move來定義類名(后面詳細解釋)。

看個普通示例。

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

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

    添加
    移除
    
        
            {{item}}
        
    

很明顯只有透明度的過渡，而Y軸(30px)的轉換過渡沒有成功，這是因為為一個inline元素，沒有這種轉換過渡的功能，因此我們需要把它切換成inline-block元素。

.num-list-item {
    /*把span切換成inline-block*/
    display:inline-block;
    margin-right: 10px;
}

仔細觀察下還能發現個問題，其他元素因為進入/離開的那個元素，會發生位置的變化，其他元素這種移動變換沒有過渡的效果，這不是我們想要的。

現在就輪到使用name-move為其他元素在此時添加移動過渡效果，很簡單的做個修改:

.num-list-move,/* 為其他受到影響的元素添加移動過渡效果*/
.num-list-enter-active,
.num-list-leave-active {
    transition: all 2s;
}

觀察文檔結構，當進入/離開發生時，會給受影響的元素添加移動過渡類名num-list-move。

進入過渡時沒問題了，其他元素平滑的向右位移，但是離開過渡時其他受影響元素的移動還是沒有過渡效果，這是因為定位問題，離開的元素要有2秒消失，默認的static定位要在2秒后離開元素才會騰出空位讓給后面的元素，而此時此刻，移動過渡的時效2秒已經過去了，因此后面元素才會很突兀的補位。
那么，我們可以在離開狀態name-leave-active上使用absolute讓元素脫離正常的文檔流，那么一發生離開，后面的元素就可以開始正常的移動過渡了。如下修改:

/* 在此離開過渡的狀態類名添加absolute定位，以受影響元素正常的使用平滑過渡 */
.num-list-leave-active {
    position: absolute;
}

總結下，就是當使用行內元素時，使用位置轉換的過渡需要把其設置為inline-block，否則位置轉換沒有效果。在離開/進入過渡時，受影響的其他元素應該使用移動過渡name-move為期定義移動過渡。還需要在離開過渡狀態類中name-leave-active設置離開過渡元素的定位為absolute使其脫離正常的文檔流，以不妨礙其他元素的移動過渡。

觀察其上CSS代碼，可以發現的進入/離開/移動過渡定義的過渡都一樣，即：

.num-list-move,
.num-list-enter-active,
.num-list-leave-active {
    transition: all 2s;
} 

因此可以去掉這些過渡狀態類名，之間寫在的樣式里就可以了。

.num-list-item {
    display:inline-block;
    margin-right: 10px;
    /* 代替 進入/離開/移動過渡狀態類 */
    transition: all 2s;
}
.num-list-enter,
.num-list-leave-to {
    opacity: 0;
    transform: translateY(30px);
}
/* 
.num-list-move,
.num-list-enter-active,
.num-list-leave-active {
    transition: all 2s;
} 
*/
/* 在此離開過渡的狀態類名添加absolute定位，以受影響元素正常的使用平滑過渡 */
.num-list-leave-active {
    position: absolute;
}

其他都原封不動，效果和第一種一樣。

在第一種寫法的基礎上添加以下功能，再次理解移動過渡。
js中導入lodash庫，使用shuffle方法重新排列數組items。

methods: {
    ramdomIndex: function () {
        return Math.floor(Math.random() * this.items.length)
    },
    add: function () {
        this.items.splice(this.ramdomIndex(), 0, this.nextNum++)
    },
    remove: function () {
        this.items.splice(this.ramdomIndex(), 1)
    },
    //使用`shuffle`方法重新排列數組`items`。
    shuffle: function () {
        this.items = _.shuffle(this.items)
    }
} 

頁面添加一個按鈕

    添加
    移除
    重排列
    
        
            {{item}}
        
    

一個汽車站：

new Vue({
    el: "#app-2",
    data: {
        buses: [1, 2, 3, 4, 5],
        nextBus: 6
    },
    mounted() {
        setInterval(() => {
            const headOrTail = () => Math.random() >= 0.5
            if (headOrTail()) {
                this.buses.push(this.nextBus)
                this.nextBus += 1
            } else {
                this.buses.splice(0, 1)
            }
        }, 2000)
    }
})

.station-bus {
    display: inline-block;
    margin-left: 10px;
    font-size: 2em;
}
.station-enter {
    opacity: 0;
    transform: translateX(30px);
}
.station-leave-to {
    opacity: 0;
    transform: translateX(-30px);
}
.station-move,
.station-enter-active,
.station-leave-active {
    transition: all 2s;
}
.station-leave-active {
    position: absolute;
}

    
公交車站
    
        ?
    
    {{buses}}

在元素插入時的鉤子上定義一個timer，每隔兩秒一輛車進入或離開，為它們設置進入/離開過渡，和其他受影響車輛的移動過渡。

如果想要在我們的站點的各處重用一種過渡，把它包裝進一個組件是個好方法。
要在站點上展示/隱藏一些縮略的文章，我們可以編寫一個過渡組件，然后為不同的縮略文章添加這個過渡組件使其擁有過渡效果。

Vue.component("puff", {
    functional: true,
    render: function (createElement, context) {
        var data = {
            props: {
                "enter-active-class": "magictime puffIn",
                "leave-active-class": "magictime puffOut"
            }
        }
        return createElement("transition", data, context.children)
    }
})
new Vue({
    el: "#app-3",
    data: {
        showRecipe: false,
        showNews: false
    }
})

    
        Recipe
    
    
        Breaking News
    
    
        

            

                過渡和動畫
            
            

                自定義過渡的類名 在鉤子中使用Velocity 兩個元素之間的過渡 ...
            
        
    
    
        

            

                今日頭條
            
            

                2017、2018面試分享（js面試題記錄）記得點贊分享哦；讓更多的人看到~~
            
        
    

這里使用了一個magicCSS動畫庫和函數式組件（todo）。
定義一個全局的函數式組件。在其render選項中定義函數并返回一個可重用的元素，在內部通過magic將進入/離開的過渡效果添加到的屬性上。在頁面需要的地方包裹該元素即可。

響應是Vue永恒的主體，因此過渡和它的屬性都可以是動態的。這樣我們可以控制在特定的位置與時間使用特定的過渡。

在多個元素之間的過渡和過渡模式中我們已經展示了動態過渡，對于不同的

元素，我們使用了不同的過渡效果和模式。