Vue transition過渡組件詳解

更新時間：2022年08月27日 15:47:22 作者：丘比特懲罰陸

我們現在可以了解一下vue的過渡，vue在插入、更新以及移除DOM元素的時候，提供了很多不同方式過渡的效果，如果在css過渡自動應用class，在過渡鉤子函數中使用JavaScript直接操作DOM就可以了

一、vue里面的transition組件

Vue提供了這個transition組件，可以使得在v-if條件渲染、v-show條件顯示、動態(tài)組件的時候可以給到任意元素和組件添加了進入或離開元素過渡。

二、transition組件應用CSS過渡

在應用css過渡的時候，transition組件會在恰當的時候添加、刪除元素。我們的transition組件包含了一下6類過渡類別；

v-enter：定義在進入過渡的時候，元素在插入之前生效，在元素被插入之后的下一幀溢出。
v-enter-active：在定義的時候，在過渡生效的狀態(tài)，在整個進入過渡的階段中應用，在元素被插入前生效，在過渡完成之后移除。
v-enter-to:定義進入過渡的結束狀態(tài)，在元素被插入之后下一幀生效，過渡完成后移除。
v-leave:定義在離開過渡的開始狀態(tài)，在離開過渡被觸發(fā)的時候立刻生效，下一幀就會被移出。
v-leave-active：在定義離開的過渡生效時狀態(tài)。
v-leave-to:定義在離開過渡的結束狀態(tài)。

我們總結的這6個過渡類，前三個是進入過渡的類，后面三個是離開過渡的類，在進入或者離開的過程中，這里6個過渡類之間相互切換。

（1）單元數/組件過渡

在transition組件中只會包含一個元素，在這個元素插入或者刪除的時候定義過渡。我們可以通過一行代碼段進行了解一下：

實例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>動態(tài)</title>
</head>
<body>
    <div id="app">
<input type="checkbox" v-model="guodu" id="game"/>
<label for="game">我已經知曉未成年人游戲時間公告</label>
<transition name="fade">
    <p v-if="guodu"><button>開始游戲</button></p>
</transition>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{guodu:false}
    });
</script>
<style>
    .fade-enter,
    .fade-leave-to {
        opacity: 0;
        transform: translateX(100px);
    }
    .fade-enter-active,
    .fade-leave-active {
        transition: all 2s;
    }
</style>
</body>
</html>

運行結果：我們可以看到但單擊選中“我已知曉王者未成年人游戲時間公告”的復選框，然后就會在頁面上淡出我們的“開始游戲”，但我們在取消勾選的時候，“開始游戲”就會淡出我們的頁面。

因為我們的組件設置了name=“fade”,然后可以在定義樣式的時候用到fade的前綴，如代碼中的.fade-enter等等，這樣定義好樣式以后，就不用進行手動引入了，transition組件就可以將我們“開始游戲”按鈕的元素恰到好處的添加以及刪除操作。

（2）多個元素過渡

transition組件包含多個元素，這一些元素在插入或者刪除的時候就可以定義過渡。我們還是通過代碼了解一下，不用大肆修改，其他的代碼就不用修改了，我們只要在前面的單個元素部分的章節(jié)上面進行修改就可以了。

實例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>動態(tài)</title>
</head>
<body>
    <div id="app">
<input type="checkbox" v-model="DGguodu" id="game"/>
<label for="game">我已經知曉未成年人游戲時間公告</label>
<transition name="fade" appear mode="out-in">
    <p v-if="DGguodu" key="1"><button>開始游戲</button></p>
    <p v-else key="2">先閱讀公告后進行游戲</p>
</transition>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{DGguodu:false}
    });
</script>
<style>
    .fade-enter,
    .fade-leave-to {
        opacity: 0;
        transform: translateX(100px);
    }
    .fade-enter-active,
    .fade-leave-active {
        transition: all 2s;
    }
</style>
</body>
</html>

運行結果：

我們看到上面結果，我們可以理解一下，為什么會出現上面這樣的結果呢，因為我們將transition設置成了appear模式屬性，這個屬性用于設置節(jié)點在初始渲染的時候也應用過渡的效果。當我們選擇復用框的時候，“先閱讀.....”這一段話就會淡出，“開始游戲”就會淡入。這是因為我們給mode設置成了out-in，mode屬性用來設置過渡模式。

（3）多個組件過渡

多個組件的過渡比多個元素過渡更加的簡單，因為他不像元素過渡的時候使用到key屬性，只需要使用動態(tài)組件即可。我們還是通過實例代碼的結果來加深了解一下：

實例代碼：

（4）列表過渡

列表過渡使用的是transition-group組件，不同于transition這個組件的是，transition-group這個組件含有更多的屬性特性，比如：mode屬性不可用、內部只能含有一個key屬性、css過渡得嘞將會應用在內部元素、渲染的時候以一個真實的元素呈現。我們通過代碼進行了解一下這個列表過渡：

實例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>列表過渡</title>
</head>
<body>
    <div id="app">
        <h1>2022屆大學生新生入學登記：</h1>
<form>
    <p><label for="name">姓名：</label>
    <input type="text" v-model="stuInfo.name" id="name"></p>
    <p><label for="xuehao">學號:</label>
    <input type="xuehao" v-model="stuInfo.xuehao" id="xuehao"></p>
<p><button @click="add" type="button">添加</button></p>
</form>
<transition-group tag="ul" name="fade">
    <li v-for="(item,index) in students" :key="item.xuehao">{{index+1}}--{{item.name}}--{{item.xuehao}}<button @click="del(index)">刪除</button>
    </li>
</transition-group>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            stuInfo:{xuehao:"  "},
            students:[]
        },
        methods:{
            add(){
                this.students.push(this.stuInfo);
                this.stuInfo={};
            },
            del(index){this.students.splice(index,1);}
        }
    });
</script>
<style>
    .fade-enter,
    .fade-leave-to {
        opacity: 0;
        transform: translateX(100px);
    }
    .fade-enter-active,
    .fade-leave-active {
        transition: all 2s;
    }
</style>
</body>
</html>

運行結果：

我們這里已經將-group的組件設置成了tag='ul',這樣使得每列表項li元素的key屬性值數據中的xuehao的屬性值，確保它的屬性值是唯一的屬性。結果如上，效果就不多說了，大家觀看即可。

三、JavaScript鉤子

JavaScript的鉤子函數可以使用transition組件里面的v-on指令綁定，transition過渡的周期可以有以下鉤子函數：

    <transition v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:after-enter="afterenter"
    v-on:enter-cancelled="entercanclled"
    v-on:before-leave="beforeLeave"
    v-on:leave="leave"
    v-on:after-leave="afterLeave"
    v-on:leave-cancelled="leaveCancelled"
    >
    </transition>

實例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>鉤子函數實現動畫</title>
</head>
<body>
    <div id="app">
        <input type="checkbox" v-model="already" id="ck"/>
        <label for="ck">我已經閱讀了相關的報名需求</label>
        <transition 
         @before-enter="beforeEnter"
         @enter="enter"
         @after-enter="after-enter"
        >
    <p class="show" v-if="already"><button>確定報名</button></p></transition>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
already:false
        },
        methods:{
            beforeEnter:function(el){
                el.style="opacity:0";console.log("beforeEnter");
            },
            enter:function(el,done) {
                el.offsetHeight;
                el.style = "opacity:1";
                console.log("enter");
                done();
            },
            afterEnter:function(el){
                console.log("afterEnter");
            }
        }
    });
</script>
<style>
    .show {
        transition: all 2s;
    }
</style>
</body>
</html>

運行結果：