Bagaimana untuk menukar animasi elemen dan komponen dalam Vue3-View.js-php.cn

Bagaimana untuk menukar animasi elemen dan komponen dalam Vue3

PHPz

Lepaskan： 2023-05-14 14:16:11

ke hadapan

891 orang telah melayarinya

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(&#39;#root&#39;);
</script>

Salin selepas log masuk

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 <transition></transition> 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 semasa hilang dahulu, dan kemudian elemen yang akan dipaparkan dipaparkan

: 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!