溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“Vue3之元素和組件的動畫如何切換”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
元素之間的動畫切換指的是兩個dom元素之間的切換，比如一個div消失，另一個div顯示，消失對應著漸出的效果，顯示對應漸入的效果，本例我們以兩個div，一個顯示hello world,另一個顯示bye world,然后使用一個按鈕控制動畫的切換，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素切換動畫的實現</title>
<style>
.v-enter-from{
opacity: 0;
}
.v-enter-active{
transition: opacity 1s ease-in;
}
.v-enter-to{
opacity: 1;
}
.v-leave-from{
opacity: 1;
}
.v-leave-active{
transition:opacity 1s ease-in
}
.v-leave-to{
opacity: 0;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
show:false
}
},
methods: {
handleClick(){
this.show = !this.show;
}
},
template:
`
<transition mode="out-in" appear>
<div v-if="show">hello world </div>
<div v-else="show" >bye world </div>
</transition>
<button @click="handleClick">switch</button>
`
});
const vm = app.mount('#root');
</script>如上面的代碼所示，我們使用CSS定義好漸入和漸出的效果，然后將我們要做動畫的div放到<transition></transition>標簽之間，使用一個Boolean變量show控制元素的顯示和隱藏，當我們點擊按鈕的時候，執行handleClick函數，將show變量取反，達到切換的效果。 在代碼中我們還看到了在transition標簽上使用了一個mode="out-in",這個mode的取值其實還有一個是mode="in-out",兩者的區別如下：
mode="out-in": 表示兩個元素切換的時候，當前的元素先消失，待顯示的元素再顯示 mode="in-out"：表示兩個元素切換的時候，待顯示的元素先顯示，當前的元素再消失
讀者可以將這兩個屬性都試試，看下效果，印象會更深
在代碼中我們看到有一個屬性appear，這個屬性的意思是當我們在瀏覽器中打開界面的時候執行動畫，否則頁面在加載的時候沒有動畫
在Vue中我們更多的會使用組件的方式 ，其實組件之間也是可以做動畫切換的實現的，這里我們可以把上面的例子改造下，以動態組件的方式實現下上面元素間切換的動畫效果，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>組件間切換動畫的實現</title>
<style>
.v-enter-from{
opacity: 0;
}
.v-enter-active{
transition: opacity 1s ease-in;
}
.v-enter-to{
opacity: 1;
}
.v-leave-from{
opacity: 1;
}
.v-leave-active{
transition:opacity 1s ease-in
}
.v-leave-to{
opacity: 0;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 多個單組件之間的動畫
const ComponentA = {
template:'<div>hello world</div>'
}
const ComponentB = {
template:'<div>bye world</div>'
}
const app = Vue.createApp({
data() {
return {
component:'component-a'
}
},
methods: {
handleClick(){
if(this.component === 'component-a'){
this.component = 'component-b';
}else{
this.component = 'component-a';
}
}
},
components:{
'component-a':ComponentA,
'component-b':ComponentB
},
// 動態組件的方式
template:
`
<transition mode="out-in" appear>
<component :is="component" />
</transition>
<button @click="handleClick">switch</button>
`
});
const vm = app.mount('#root');
</script>“Vue3之元素和組件的動畫如何切換”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
