3嵌屎、組件和元素切換動(dòng)畫(huà)的實(shí)現(xiàn)
代碼
<!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>hello vue</title>
<!-- 引入Vue庫(kù) -->
<script src="https://unpkg.com/vue@next"></script>
<!-- 樣式 -->
<style>
.v-leave-to,
.v-enter-from{
opacity: 0;
}
.v-leave-active,
.v-enter-active{
transition: opacity 3s ease-in;
}
.v-leave-from,
.v-enter-to{
opacity: 1;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data(){return{show: false}},
methods:{
shift(){
this.show = !this.show;
}
},
template: `
<div>
<transition>
<div v-if="show">hello world!</div>
<div v-else="show">bye world!</div>
</transition>
<button @click="shift">切換</button>
</div>
`
});
const vm = app.mount('#root');
</script>
</html>
運(yùn)行結(jié)果
image-20210613235735059.png
使得它們”出入有序“
mode="out-in"
<!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>hello vue</title>
<!-- 引入Vue庫(kù) -->
<script src="https://unpkg.com/vue@next"></script>
<!-- 樣式 -->
<style>
.v-leave-to,
.v-enter-from{
opacity: 0;
}
.v-leave-active,
.v-enter-active{
transition: opacity 3s ease-in;
}
.v-leave-from,
.v-enter-to{
opacity: 1;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data(){return{show: false}},
methods:{
shift(){
this.show = !this.show;
}
},
// mode="out-in"
template: `
<div>
<transition mode="out-in">
<div v-if="show">hello world!</div>
<div v-else="show">bye world!</div>
</transition>
<button @click="shift">切換</button>
</div>
`
});
const vm = app.mount('#root');
</script>
</html>
運(yùn)行結(jié)果
image-20210614000543676.png
第一次渲染頁(yè)面就有動(dòng)畫(huà)效果
appear
<!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>hello vue</title>
<!-- 引入Vue庫(kù) -->
<script src="https://unpkg.com/vue@next"></script>
<!-- 樣式 -->
<style>
.v-leave-to,
.v-enter-from{
opacity: 0;
}
.v-leave-active,
.v-enter-active{
transition: opacity 3s ease-in;
}
.v-leave-from,
.v-enter-to{
opacity: 1;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data(){return{show: false}},
methods:{
shift(){
this.show = !this.show;
}
},
template: `
<div>
<transition mode="out-in" appear>
<div v-if="show">hello world!</div>
<div v-else="show">bye world!</div>
</transition>
<button @click="shift">切換</button>
</div>
`
});
const vm = app.mount('#root');
</script>
</html>
運(yùn)行效果
image-20210614000858320.png
多個(gè)單組件動(dòng)畫(huà)切換
寫法一：與多個(gè)但元素寫法類似；
寫法二：使用 :is 指令恍涂，和前面使用方法也非常類似宝惰；
<!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>hello vue</title>
<!-- 引入Vue庫(kù) -->
<script src="https://unpkg.com/vue@next"></script>
<!-- 樣式 -->
<style>
.v-leave-to,
.v-enter-from{
opacity: 0;
}
.v-leave-active,
.v-enter-active{
transition: opacity 3s ease-in;
}
.v-leave-from,
.v-enter-to{
opacity: 1;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data(){return{currentItem: 'hello'}},
methods:{
shift(){
if(this.currentItem === 'hello'){
this.currentItem = 'bye'
}else{
this.currentItem = 'hello'
}
}
},
template: `
<div>
<transition mode="out-in" appear>
<component :is="currentItem" />
</transition>
<button @click="shift">切換</button>
</div>
`
});
app.component("hello", {
template: `
<div>hello world!</div>
`
});
app.component("bye", {
template: `
<div>bye world!</div>
`
});
const vm = app.mount('#root');
</script>
</html>
運(yùn)行結(jié)果
image-20210614001706787.png
