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

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

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

    
        Call a cab
    
    
        
?
    

這個過程到底發(fā)生了什么？

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

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

這種創(chuàng)建動畫的方式成為FLIP

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

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

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

Play(p): 為我們設(shè)置的屬性創(chuàng)建過渡，這里在2s內(nèi)使taxi從右到左產(chǎn)生了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三種情況的時間點(diǎn)，每種情況上都定義了四種事件，總計(jì)12種事件（見API）。在這12種事件綁定鉤子函數(shù)，這些函數(shù)可以配合CSS模式使用，也可以多帶帶使用。這里我們在鉤子函數(shù)中使用velocity腳本動畫引擎，多帶帶完成動畫配置。

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

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

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

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

關(guān)于velocity，這種類型的API，我們稱為forcefeeding，我們只要往它的實(shí)例中填寫數(shù)據(jù)，不管他內(nèi)部如何運(yùn)行。（具體查看velocity）

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

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

    
        
        
    
    
在組件第一次插入文檔時執(zhí)行相關(guān)的過渡

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發(fā)現(xiàn)appear特性，開始查找標(biāo)簽中的JavaScript鉤子或指定的CSS類名。之后如果有一個name被指定，就根據(jù)這個name查到過渡的入口:mySpecifiedName-enter、mySpecifiedName-enter-active等。
如果以上過程失敗，就會找默認(rèn)的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
    

結(jié)果發(fā)現(xiàn)切換后沒任何過渡效果，原因是什么呢？
原來是，Vue會啟動自身的優(yōu)化系統(tǒng)，發(fā)現(xiàn)兩個元素一模一樣，就是內(nèi)容不同，因此當(dāng)切換時，只做了內(nèi)容的替換，標(biāo)簽

    
? frog
    
? princess

過渡效果正常了。

最佳實(shí)踐，在元素上使用key，尤其是當(dāng)元素間具有不同的語義時。

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

    
? frog
    
? princess
    
? santa

更好的方法是我們可以根據(jù)已有的數(shù)據(jù)動態(tài)的處理多元素過渡。

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和內(nèi)容，都將根據(jù)實(shí)例數(shù)據(jù)與計(jì)算屬性進(jìn)行動態(tài)的綁定。
這樣做更加的靈活，并且可以為不同的元素應(yīng)用不同的過渡（name和mode的不同）。

這里的mode有三種情況:

不設(shè)置 舊元素離開過渡效果和新元素的進(jìn)入過渡效果同時發(fā)生

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

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

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

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

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

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

再來看看結(jié)果。

似乎是有點(diǎn)不對勁，為什么會這樣呢？

看看過渡執(zhí)行時的DOM，發(fā)現(xiàn)前后兩個元素的過渡是同時進(jìn)行，這是Vue的默認(rèn)情況，即兩個

這下過渡模式mode就派上用處了，我們?yōu)檫^渡添加mode屬性為out-in，舊先出新后進(jìn)。

    
{{products[product % 4]}}

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

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

在上設(shè)置tag屬性外包多個元素，如

在內(nèi)部以v-for把元素渲染成列表形式

每個內(nèi)部的元素需要使用:key="data"標(biāo)記以與它的同胞們作區(qū)分

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

看個普通示例。

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)的轉(zhuǎn)換過渡沒有成功，這是因?yàn)?b>為一個inline元素，沒有這種轉(zhuǎn)換過渡的功能，因此我們需要把它切換成inline-block元素。

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

仔細(xì)觀察下還能發(fā)現(xiàn)個問題，其他元素因?yàn)?b>進(jìn)入/離開的那個元素，會發(fā)生位置的變化，其他元素這種移動變換沒有過渡的效果，這不是我們想要的。

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

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

觀察文檔結(jié)構(gòu)，當(dāng)進(jìn)入/離開發(fā)生時，會給受影響的元素添加移動過渡類名num-list-move。

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

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

總結(jié)下，就是當(dāng)使用行內(nèi)元素時，使用位置轉(zhuǎn)換的過渡需要把其設(shè)置為inline-block，否則位置轉(zhuǎn)換沒有效果。在離開/進(jìn)入過渡時，受影響的其他元素應(yīng)該使用移動過渡name-move為期定義移動過渡。還需要在離開過渡狀態(tài)類中name-leave-active設(shè)置離開過渡元素的定位為absolute使其脫離正常的文檔流，以不妨礙其他元素的移動過渡。

觀察其上CSS代碼，可以發(fā)現(xiàn)的進(jìn)入/離開/移動過渡定義的過渡都一樣，即：

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

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

.num-list-item {
    display:inline-block;
    margin-right: 10px;
    /* 代替 進(jìn)入/離開/移動過渡狀態(tài)類 */
    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;
} 
*/
/* 在此離開過渡的狀態(tài)類名添加absolute定位，以受影響元素正常的使用平滑過渡 */
.num-list-leave-active {
    position: absolute;
}

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

在第一種寫法的基礎(chǔ)上添加以下功能，再次理解移動過渡。
js中導(dǎo)入lodash庫，使用shuffle方法重新排列數(shù)組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`方法重新排列數(shù)組`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，每隔兩秒一輛車進(jìn)入或離開，為它們設(shè)置進(jìn)入/離開過渡，和其他受影響車輛的移動過渡。

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

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面試題記錄）記得點(diǎn)贊分享哦；讓更多的人看到~~
            
        
    

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

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

在多個元素之間的過渡和過渡模式中我們已經(jīng)展示了動態(tài)過渡，對于不同的

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