Rumah >hujung hadapan web >View.js >Bagaimana untuk menukar animasi elemen dan komponen dalam Vue3
Bagaimana untuk menukar animasi elemen dan komponen dalam Vue3
- PHPzke hadapan
- 2023-05-14 14:16:11904semak imbas
Contoh analisis
Animasi bertukar antara elemen
Animasi bertukar antara elemen merujuk kepada animasi bertukar antara dua dom elemen Bertukar antara , sebagai contoh, satu div hilang dan satu lagi div dipaparkan sepadan dengan kesan pudar keluar, dan paparan sepadan dengan kesan pudar masuk. Dalam contoh ini, kami menggunakan dua div, satu memaparkan <.>, dan One yang lain memaparkan hello world, dan kemudian menggunakan butang untuk mengawal penukaran animasi Kod adalah seperti berikut: 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> Seperti yang ditunjukkan dalam kod di atas, kami menggunakan CSS untuk mentakrifkan. kesan fade-in dan fade-out, dan kemudian kita akan lakukan animasi diletakkan di antara teg div dan 300ff3b250bc578ac201dd5fb34a00046087faffb1c3f26530d25a6b190c2f81 pembolehubah Boolean digunakan untuk mengawal paparan dan penyembunyian elemen. Apabila kita mengklik butang, fungsi show dilaksanakan dan pembolehubah handleClick diterbalikkan , untuk mencapai kesan pensuisan. Dalam kod, kita juga melihat bahawa show digunakan pada teg peralihan ini sebenarnya adalah satu lagi mode="out-in" Perbezaan antara kedua-duanya adalah seperti berikut: modemode="in-out"
: Menunjukkan bahawa apabila dua elemen ditukar, elemen yang akan dipaparkan dipaparkan dahulu, dan kemudian elemen semasa hilang mode="out-in"mode="in-out" Pembaca boleh mencuba kedua-dua atribut ini untuk melihat kesannya, dan kesannya akan lebih mendalam
Dalam kod kita melihat bahawa terdapat atribut yang muncul apabila kami membuka antara muka dalam penyemak imbas Laksanakan animasi, jika tidak, tiada animasi apabila halaman dimuatkan
Animasi bertukar antara komponen
Dalam Vue, kami akan lebih banyak menggunakan komponen. penukaran animasi juga boleh dilakukan antara komponen Di sini kita boleh mengubah contoh di atas dan menggunakan komponen dinamik untuk mencapai kesan animasi bertukar antara elemen di atas
Atas ialah kandungan terperinci Bagaimana untuk menukar animasi elemen dan komponen dalam Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!