Bagaimana untuk mengalih keluar kelewatan peralihan dalam peralihan Vue?

Question

Saya menggunakan Vue untuk menghidupkan kotak teks yang bergerak ke atas dan pudar masuk apabila tetikus melayang di atas imej. Animasi adalah betul, tetapi terdapat sedikit kelewatan sebelum ia bermula. Saya mahu kotak teks lancar dan serta-merta mula pudar masuk dan bergerak ke atas apabila imej dilegar. Kotak teks dengan betul pudar dan bergerak ke bawah apabila kursor pergi.

template: `
            <div>
                <div class="atribut-icons" v-for="(item, i) dalam techBadges" :key="'tech_' + i">
                    <img @mouseenter="hoverStart(i)" @mouseleave="hoverEnd" class="attribute-icon" width="30px" height="30px" :src="lencana[item].imageSrc" :alt="30px" lencana[item].alt"/>
                    <Peralihan>
                        <p v-show="hoveredIndex === i">{{ lencana[item].keterangan }}</p>
                    </Peralihan>
                </div>
            </div>
        `,
        kaedah:{
            hoverStart(i){
                this.hoveredIndex = i;
            },
            hoverEnd(){
                this.hoveredIndex = null;
            }
        },

.ikon atribut {
                    jidar atas: 5px;
                    jawatan:saudara;
                    kelewatan peralihan: 0s;

                    img {
                        lebar: 28px;
                        ketinggian: 28px;
                        jidar-kanan: 8px;
                        peralihan: 0.24s;
                        kelewatan peralihan: 0s;
                        
                    }

                    p {
                        jawatan: mutlak;
                        atas: 20px;
                        lebar: 19vw;
                        lebar maksimum: 350px;
                        lebar min: 175px;
                        latar belakang: #0088ce;
                        warna: #ffffff;
                        indeks-z: 1;
                        jejari sempadan: 5px;
                        padding: 5px 10px;
                        bayang-kotak: 0 0 18px rgba(2, 2, 2, 0.14);
                        pointer-events: tiada;
                        berat fon: 500;
                        saiz fon: 13px;
                        peralihan: 0.24s mudah;
                        kelewatan peralihan: 0s;
                        @media(lebar maksimum:1100px){
                            lebar: 25vw;
                        }
                        @media(lebar maksimum:991px){
                            lebar: 36vw;
                        }

                    }

                    .v-masuk-daripada{
                        kelegapan: 0;
                        transform: translateY(10px);
                        peralihan: kelegapan 0.24s memudahkan, mengubah 0.24s memudahkan;
                        kelewatan peralihan: 0s;
                    };
                    .v-masuk-aktif{
                        kelewatan peralihan: 0s;
                        peralihan: kelegapan 0.24s memudahkan, mengubah 0.24s memudahkan;
                        transform: translateY(4px);
                    };
                    .v-enter-to{

                    };

                    .v-tinggalkan-daripada{
                        transform: translateY(10px);
                    };
                    .v-cuti-aktif{
                        peralihan: kelegapan 0.24s memudahkan, mengubah 0.24s memudahkan;
                        transform: translateY(10px);
                    };
                    .v-tinggalkan-ke{
                        kelegapan:0;
                    };

我尝试给所有元素添加penangguhan peralihan: 0s，但没有起作用。

Answer 1

Dalam Vue.js, transition组件允许您在元素插入、更新或从DOM中删除时添加过渡效果。默认情况下，Vue在元素插入或删除时应用过渡延迟，这给用户带来了更平滑的过渡效果。然而，如果您想去除过渡延迟，使元素立即出现或消失，您可以使用appearsifat serta sifat peralihan CSS.

Berikut adalah contoh bagaimana anda boleh mencapai ini:

1. Dalam templat komponen Vue, gunakan komponen dengan appear属性的transition:

<template>
  <transition appear name="fade">
    <div v-if="showElement" class="element">要显示的元素</div>
  </transition>
</template>

2. Tambah CSS kesan peralihan yang diperlukan dalam bahagian gaya komponen anda atau CSS global:

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.0s; /* 将过渡延迟设置为0秒 */
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

Dalam contoh ini, fade类被用作过渡名称，但您可以将其替换为任何您喜欢的类名。通过将transition属性设置为opacity 0.0s, anda sebenarnya sedang mengalih keluar kelewatan peralihan.

Perlu diingat bahawa walaupun mengalih keluar kelewatan peralihan boleh memberikan perubahan visual serta-merta, ia juga boleh menghasilkan pengalaman pengguna yang lebih mendadak. Peralihan sering digunakan untuk menyediakan antara muka yang lebih lancar dan lebih menarik secara visual.

Perlu diingat bahawa kelakuan Vue mungkin berubah dari semasa ke semasa, jadi pastikan anda merujuk dokumentasi rasmi Vue untuk versi yang anda gunakan untuk mendapatkan maklumat yang paling tepat dan terkini.