Komponen peralihan dalam Vue3: merealisasikan kesan peralihan komponen

Komponen peralihan dalam Vue3: Melaksanakan kesan peralihan komponen

Vue3 ialah versi serba baharu yang dilancarkan baru-baru ini, yang telah membuat banyak peningkatan dalam prestasi dan pengalaman pembangunan. Pada masa yang sama, Vue3 juga menyediakan lebih banyak ciri dan fungsi, salah satu fungsi penting ialah komponen peralihan. Dalam Vue3, komponen peralihan boleh digunakan untuk melaksanakan kesan peralihan komponen, dengan itu menjadikan UI lebih kaya dan lebih jelas.

Apakah komponen peralihan?

Dalam Vue3, komponen peralihan ialah komponen yang sangat berguna, yang boleh digunakan untuk menambah kesan peralihan kepada komponen. Dalam istilah awam, akan ada beberapa kesan animasi apabila komponen muncul dan hilang. Kesan animasi ini boleh pudar masuk dan pudar, zum masuk dan keluar, dsb., yang sangat praktikal.

Gunakan komponen peralihan untuk mencapai kesan peralihan

Untuk menggunakan komponen peralihan untuk mencapai kesan peralihan komponen, kita perlu menguasai beberapa mata pengetahuan asas terlebih dahulu. Yang pertama ialah penggunaan asas komponen peralihan. Berikut ialah contoh kod penggunaan asas:

<template>
    <transition name="fade">
        <div v-if="show">我是一个div组件</div>
    </transition>
    
    <button @click="toggleShow">切换组件</button>
</template>

<script>
export default {
    data() {
        return {
            show: true
        };
    },
    
    methods: {
        toggleShow() {
            this.show = !this.show;
        }
    }
}
</script>

<style>
.fade-enter-active,
.fade-leave-active {
    transition: opacity .5s;
}
.fade-enter,
.fade-leave-to{
    opacity:0;
}
</style>

Dalam kod di atas, kami mula-mula mentakrifkan komponen peralihan, dan kemudian mentakrifkan komponen div dalam komponen peralihan. Komponen div ini hanya akan dipaparkan apabila rancangan adalah benar. Berikut ialah penjelasan kod:

• mentakrifkan atribut bernama "fade" pada teg peralihan Atribut ini menunjukkan bahawa semasa proses animasi, "fade-" akan ditambah di hadapan nama kelas CSS " awalan. Penerangan terperinci tentang nama kelas CSS akan dibincangkan kemudian.
• Nilai nilai show dalam v-if Jika benar, ia akan dipaparkan, jika palsu, ia akan disembunyikan.
• Dalam gaya, kami mentakrifkan kelas bernama "fade-enter", "fade-leave-to", "fade-enter-active" dan "fade-leave-active". Nama kelas ini terdiri daripada nama "pudar" yang kami takrifkan dalam atribut ditambah awalan.
• Apabila komponen berubah daripada tersembunyi kepada dipaparkan, Vue secara automatik akan menambah nama kelas "fade-enter" pada komponen Pada masa ini, kita boleh menetapkan keadaan awal komponen melalui CSS. Dengan cara yang sama, apabila komponen berubah daripada dipaparkan kepada tersembunyi, Vue secara automatik akan menambah nama kelas "fade-leave-to" pada komponen Pada masa ini, kita boleh menetapkan keadaan akhir komponen melalui CSS.
• Tetapkan sifat peralihan CSS dalam "fade-enter-active" dan "fade-leave-active", yang mewakili tempoh animasi. Di sini kami menetapkannya kepada 0.5 saat.
• Melalui langkah di atas, kami berjaya menambahkan kesan peralihan fade-in dan fade-out pada komponen div.

Nama kelas CSS bagi komponen peralihan

Dalam kod di atas kami menggunakan nama kelas "fade-enter", "fade-leave-to", "fade-enter- aktif", dan "fade-leave-active". Nama kelas ini terbina dalam komponen peralihan, tetapi kita perlu menetapkan awalan mereka mengikut atribut nama peralihan. Apabila Vue mengesan kemasukan atau keluar elemen, ia akan menambah nama kelas berikut dalam urutan:

• [nama]-enter: keadaan permulaan kemasukan. Nama kelas ini ditambahkan pada elemen sebaik sahaja ia ditambahkan pada DOM.
• [name]-enter-active: Memasuki keadaan peralihan. Nama kelas ini akan ditambahkan pada elemen sejurus selepas memasuki keadaan.
• [nama]-masuk-ke: Keadaan akhir kemasukan. Nama kelas ini akan ditambahkan pada elemen pada penghujung keadaan kemasukan.
• [nama]-cuti: Keadaan permulaan untuk meninggalkan. Nama kelas ini ditambahkan pada elemen sebaik sahaja ia meninggalkan DOM.
• [nama]-cuti-aktif: Tinggalkan keadaan peralihan. Nama kelas ini akan ditambahkan pada elemen sejurus selepas keadaan keluar tamat.
• [nama]-cuti-ke: Status tamat meninggalkan. Nama kelas ini akan ditambahkan pada elemen pada akhir keadaan cuti.

Kita boleh mentakrifkan keadaan awal, pertengahan dan akhir bagi kesan peralihan untuk komponen berdasarkan nama kelas ini.

Ringkasan

Dalam Vue3, komponen peralihan ialah komponen asas yang digunakan untuk mencapai kesan peralihan komponen Ia membolehkan kami menambah beberapa kesan visual yang kaya pada komponen, dengan itu meningkatkan pengalaman interaktif pengguna. Apabila menggunakan komponen peralihan, kita perlu terlebih dahulu menguasai kaedah penggunaan asas dan nama kelas CSS yang berkaitan, supaya kita boleh memanfaatkannya dalam projek sebenar.

Atas ialah kandungan terperinci Komponen peralihan dalam Vue3: merealisasikan kesan peralihan komponen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!