溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容介紹了“Vue transition過渡組件怎么用”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
Vue提供了這個(gè)transition組件，可以使得在v-if條件渲染、v-show條件顯示、動態(tài)組件的時(shí)候可以給到任意元素和組件添加了進(jìn)入或離開元素過渡。
在應(yīng)用css過渡的時(shí)候，transition組件會在恰當(dāng)?shù)臅r(shí)候添加、刪除元素。我們的transition組件包含了一下6類過渡類別；
v-enter：定義在進(jìn)入過渡的時(shí)候，元素在插入之前生效，在元素被插入之后的下一幀溢出。
v-enter-active：在定義的時(shí)候，在過渡生效的狀態(tài)，在整個(gè)進(jìn)入過渡的階段中應(yīng)用，在元素被插入前生效，在過渡完成之后移除。
v-enter-to:定義進(jìn)入過渡的結(jié)束狀態(tài)，在元素被插入之后下一幀生效，過渡完成后移除。
v-leave:定義在離開過渡的開始狀態(tài)，在離開過渡被觸發(fā)的時(shí)候立刻生效，下一幀就會被移出。
v-leave-active：在定義離開的過渡生效時(shí)狀態(tài)。
v-leave-to:定義在離開過渡的結(jié)束狀態(tài)。
我們總結(jié)的這6個(gè)過渡類，前三個(gè)是進(jìn)入過渡的類，后面三個(gè)是離開過渡的類，在進(jìn)入或者離開的過程中，這里6個(gè)過渡類之間相互切換。
在transition組件中只會包含一個(gè)元素，在這個(gè)元素插入或者刪除的時(shí)候定義過渡。我們可以通過一行代碼段進(jìn)行了解一下：
實(shí)例代碼：
<!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">我已經(jīng)知曉未成年人游戲時(shí)間公告</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>
運(yùn)行結(jié)果：我們可以看到但單擊選中“我已知曉王者未成年人游戲時(shí)間公告”的復(fù)選框，然后就會在頁面上淡出我們的“開始游戲”，但我們在取消勾選的時(shí)候，“開始游戲”就會淡出我們的頁面。
因?yàn)槲覀兊慕M件設(shè)置了name=“fade”,然后可以在定義樣式的時(shí)候用到fade的前綴，如代碼中的.fade-enter等等，這樣定義好樣式以后，就不用進(jìn)行手動引入了，transition組件就可以將我們“開始游戲”按鈕的元素恰到好處的添加以及刪除操作。
transition組件包含多個(gè)元素，這一些元素在插入或者刪除的時(shí)候就可以定義過渡。我們還是通過代碼了解一下，不用大肆修改，其他的代碼就不用修改了，我們只要在前面的單個(gè)元素部分的章節(jié)上面進(jìn)行修改就可以了。
實(shí)例代碼：
<!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">我已經(jīng)知曉未成年人游戲時(shí)間公告</label>
<transition name="fade" appear mode="out-in">
<p v-if="DGguodu" key="1"><button>開始游戲</button></p>
<p v-else key="2">先閱讀公告后進(jìn)行游戲</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>運(yùn)行結(jié)果：
我們看到上面結(jié)果，我們可以理解一下，為什么會出現(xiàn)上面這樣的結(jié)果呢，因?yàn)槲覀儗ransition設(shè)置成了appear模式屬性，這個(gè)屬性用于設(shè)置節(jié)點(diǎn)在初始渲染的時(shí)候也應(yīng)用過渡的效果。當(dāng)我們選擇復(fù)用框的時(shí)候，“先閱讀.....”這一段話就會淡出，“開始游戲”就會淡入。這是因?yàn)槲覀兘omode設(shè)置成了out-in，mode屬性用來設(shè)置過渡模式。
多個(gè)組件的過渡比多個(gè)元素過渡更加的簡單，因?yàn)樗幌裨剡^渡的時(shí)候使用到key屬性，只需要使用動態(tài)組件即可。我們還是通過實(shí)例代碼的結(jié)果來加深了解一下：
實(shí)例代碼：
列表過渡使用的是transition-group組件，不同于transition這個(gè)組件的是，transition-group這個(gè)組件含有更多的屬性特性，比如：mode屬性不可用、內(nèi)部只能含有一個(gè)key屬性、css過渡得嘞將會應(yīng)用在內(nèi)部元素、渲染的時(shí)候以一個(gè)真實(shí)的元素呈現(xiàn)。我們通過代碼進(jìn)行了解一下這個(gè)列表過渡：
實(shí)例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<title>列表過渡</title>
</head>
<body>
<div id="app">
<h2>2022屆大學(xué)生新生入學(xué)登記：</h2>
<form>
<p><label for="name">姓名：</label>
<input type="text" v-model="stuInfo.name" id="name"></p>
<p><label for="xuehao">學(xué)號:</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>運(yùn)行結(jié)果：
我們這里已經(jīng)將-group的組件設(shè)置成了tag='ul',這樣使得每列表項(xiàng)li元素的key屬性值數(shù)據(jù)中的xuehao的屬性值，確保它的屬性值是唯一的屬性。結(jié)果如上，效果就不多說了，大家觀看即可。
JavaScript的鉤子函數(shù)可以使用transition組件里面的v-on指令綁定，transition過渡的周期可以有以下鉤子函數(shù)：
<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>
實(shí)例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<title>鉤子函數(shù)實(shí)現(xiàn)動畫</title>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="already" id="ck"/>
<label for="ck">我已經(jīng)閱讀了相關(guān)的報(bào)名需求</label>
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="after-enter"
>
<p class="show" v-if="already"><button>確定報(bào)名</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.;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>運(yùn)行結(jié)果：
我們可以看到單擊復(fù)選框的時(shí)候，“確認(rèn)報(bào)名”就會慢慢的顯示出啦，而且取消勾選不會淡出！
“Vue transition過渡組件怎么用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼