Vue transition過渡組件詳解

Posted on by

一、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內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：