Wie entferne ich die Übergangsverzögerung beim Vue-Übergang?

Question

Ich verwende Vue, um ein Textfeld zu animieren, das nach oben verschoben und eingeblendet wird, wenn die Maus über einem Bild schwebt. Die Animation ist korrekt, es gibt jedoch eine leichte Verzögerung, bevor sie startet. Ich möchte, dass das Textfeld reibungslos verläuft und sofort eingeblendet und nach oben verschoben wird, wenn der Mauszeiger über das Bild bewegt wird. Das Textfeld wird ordnungsgemäß ausgeblendet und nach unten verschoben, wenn der Cursor weggeht.

template: `
            <div>
                <div class="attribute-icons" v-for="(item, i) in techBadges" :key="'tech_' + i">
                    <img @mouseenter="hoverStart(i)" @mouseleave="hoverEnd" class="attribute-icon" width="30px" height="30px" :src="badges[item].imageSrc" :alt=" Badges[item].alt"/>
                    <Übergang>
                        <p v-show="hoveredIndex === i">{{ Badges[item].description }}</p>
                    </Übergang>
                </div>
            </div>
        `,
        Methoden:{
            hoverStart(i){
                this.hoveredIndex = i;
            },
            hoverEnd(){
                this.hoveredIndex = null;
            }
        },

.attribute-icons {
                    Rand oben: 5px;
                    Position:relativ;
                    Übergangsverzögerung: 0s;

                    img {
                        Breite: 28px;
                        Höhe: 28px;
                        Rand rechts: 8px;
                        Übergang: 0,24 s;
                        Übergangsverzögerung: 0s;
                        
                    }

                    P {
                        Position: absolut;
                        oben: 20px;
                        Breite:19vw;
                        maximale Breite: 350 Pixel;
                        Mindestbreite: 175 Pixel;
                        Hintergrund: #0088ce;
                        Farbe: #ffffff;
                        Z-Index: 1;
                        Randradius: 5px;
                        Polsterung: 5px 10px;
                        Box-Shadow: 0 0 18px rgba(2, 2, 2, 0,14);
                        Zeigerereignisse: keine;
                        Schriftstärke: 500;
                        Schriftgröße: 13px;
                        Übergang: 0,24 s Leichtigkeit;
                        Übergangsverzögerung: 0s;
                        @media(max-width:1100px){
                            Breite:25vw;
                        }
                        @media(max-width:991px){
                            Breite:36vw;
                        }

                    }

                    .v-enter-from{
                        Deckkraft: 0;
                        transform: TranslateY(10px);
                        Übergang: Deckkraft 0,24 Sekunden, Transformation 0,24 Sekunden;
                        Übergangsverzögerung: 0s;
                    };
                    .v-enter-active{
                        Übergangsverzögerung: 0s;
                        Übergang: Deckkraft 0,24 Sekunden, Transformation 0,24 Sekunden;
                        transform: TranslateY(4px);
                    };
                    .v-enter-to{

                    };

                    .v-leave-from{
                        transform: TranslateY(10px);
                    };
                    .v-leave-active{
                        Übergang: Deckkraft 0,24 Sekunden, Transformation 0,24 Sekunden;
                        transform: TranslateY(10px);
                    };
                    .v-leave-to{
                        Deckkraft:0;
                    };

我尝试给所有元素添加transition-delay: 0s，但没有起作用.

Answer 1

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

以下是您可以实现此目的的示例：

1. 在Vue组件的模板中，使用带有appear属性的transition组件：

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

2. 在您的组件样式部分或全局CSS中添加必要的过渡效果CSS：

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

在此示例中，fade类被用作过渡名称，但您可以将其替换为任何您喜欢的类名。通过将transition属性设置为opacity 0.0s，您实际上是在去除过渡延迟。

请记住，虽然去除过渡延迟可能会提供立即的视觉变化，但也可能导致更突然的用户体验。过渡通常用于提供更平滑和更具视觉吸引力的界面。

请记住，Vue的行为可能随时间而变化，因此请确保查阅您使用的版本的官方Vue文档，以获取最准确和最新的信息。