How to remove transition delay in Vue transition?

Question

I'm using Vue to animate a text box that moves up and fades in when the mouse is hovering over the image. The animation is correct, but there is a slight delay before it starts. I want the text box to smoothly and immediately start fading in and moving up when the image is hovered. The text box properly fades out and moves down when the cursor leaves.

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"/>
                    <Transition>
                        <p v-show="hoveredIndex === i">{{ badges[item].description }}</p>
                    </Transition>
                </div>
            </div>
        `,
        methods:{
            hoverStart(i){
                this.hoveredIndex = i;
            },
            hoverEnd(){
                this.hoveredIndex = null;
            }
        },

.attribute-icons {
                    margin-top: 5px;
                    position:relative;
                    transition-delay: 0s;

                    img {
                        width: 28px;
                        height: 28px;
                        margin-right: 8px;
                        transition: 0.24s;
                        transition-delay: 0s;
                        
                    }

                    p {
                        position: absolute;
                        top: 20px;
                        width:19vw;
                        max-width:350px;
                        min-width:175px;
                        background: #0088ce;
                        color: #ffffff;
                        z-index: 1;
                        border-radius: 5px;
                        padding: 5px 10px;
                        box-shadow: 0 0 18px rgba(2, 2, 2, 0.14);
                        pointer-events: none;
                        font-weight: 500;
                        font-size: 13px;
                        transition: 0.24s ease;
                        transition-delay: 0s;
                        @media(max-width:1100px){
                            width:25vw;
                        }
                        @media(max-width:991px){
                            width:36vw;
                        }

                    }

                    .v-enter-from{
                        opacity: 0;
                        transform: translateY(10px);
                        transition: opacity 0.24s ease, transform 0.24s ease;
                        transition-delay: 0s;
                    };
                    .v-enter-active{
                        transition-delay: 0s;
                        transition: opacity 0.24s ease, transform 0.24s ease;
                        transform: translateY(4px);
                    };
                    .v-enter-to{

                    };

                    .v-leave-from{
                        transform: translateY(10px);
                    };
                    .v-leave-active{
                        transition: opacity 0.24s ease, transform 0.24s ease;
                        transform: translateY(10px);
                    };
                    .v-leave-to{
                        opacity:0;
                    };

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

Answer 1

In Vue.js, the transition component allows you to add transition effects when an element is inserted, updated, or removed from the DOM. By default, Vue applies a transition delay when elements are inserted or removed, which gives users a smoother transition effect. However, if you want to remove the transition delay and make the element appear or disappear immediately, you can use the appear property along with the CSS transition property.

Here are examples of how you can achieve this:

1. In the template of the Vue component, use the transition component with the appear attribute:

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

2. Add necessary transition effect CSS in your component style section or global CSS:

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

In this example, the fade class is used as the transition name, but you can replace it with any class name you like. By setting the transition property to opacity 0.0s, you are actually removing the transition delay.

Keep in mind that while removing transition delays may provide an immediate visual change, it may also result in a more abrupt user experience. Transitions are often used to provide a smoother and more visually appealing interface.

Keep in mind that the behavior of Vue may change over time, so be sure to consult the official Vue documentation for the version you are using for the most accurate and up-to-date information.