Vue transition過渡元件詳解

2022-08-27 22:05:34

一、vue裡面的transition元件

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

二、transition元件應用CSS過渡

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

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

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

（1）單元數/元件過渡

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

範例程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>動態</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元件包含多個元素，這一些元素在插入或者刪除的時候就可以定義過渡。我們還是通過程式碼瞭解一下，不用大肆修改，其他的程式碼就不用修改了，我們只要在前面的單個元素部分的章節上面進行修改就可以了。

範例程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>動態</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模式屬性，這個屬性用於設定節點在初始渲染的時候也應用過渡的效果。當我們選擇複用框的時候，“先閱讀.....”這一段話就會淡出，“開始遊戲”就會淡入。這是因為我們給mode設定成了out-in，mode屬性用來設定過渡模式。

（3）多個元件過渡

多個元件的過渡比多個元素過渡更加的簡單，因為他不像元素過渡的時候使用到key屬性，只需要使用動態元件即可。我們還是通過範例程式碼的結果來加深瞭解一下：

範例程式碼：

（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>

執行結果：

我們可以看到單擊核取方塊的時候，“確認報名”就會慢慢的顯示出啦，而且取消勾選不會淡出！

到此這篇關於Vue transition過渡元件詳解的文章就介紹到這了,更多相關Vue transition內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

Vue transition過渡元件詳解

目錄

一、vue裡面的transition元件

二、transition元件應用CSS過渡

（1）單元數/元件過渡

（2）多個元素過渡

（3）多個元件過渡

（4）列表過渡

三、JavaScript勾點

熱門文章