如何消除Vue Transition组件的过渡延迟？

问题分析 #

你遇到的延迟并非由transition-delay导致，而是过渡类状态定义错误、默认过渡属性冲突，以及鼠标移出逻辑的小瑕疵共同造成的。以下是针对性修复方案：

修复后的代码 #

模板部分

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

CSS部分

.attribute-icons {
    margin-top: 5px;
    position: relative;

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

    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;
        
        @media(max-width:1100px){
            width:25vw;
        }
        @media(max-width:991px){
            width:36vw;
        }
    }

    .badge-tooltip-enter-from,
    .badge-tooltip-leave-to {
        opacity: 0;
        transform: translateY(10px);
    }

    .badge-tooltip-enter-active,
    .badge-tooltip-leave-active {
        transition: opacity 0.24s ease, transform 0.24s ease;
        transition-delay: 0s;
    }

    .badge-tooltip-enter-to,
    .badge-tooltip-leave-from {
        opacity: 1;
        transform: translateY(4px);
    }
}

关键修改点 #

• 自定义过渡类名：给Transition组件添加name="badge-tooltip"，避免全局过渡类冲突，提升代码可读性。
• 优化鼠标移出逻辑：hoverEnd方法仅在当前元素处于激活状态时重置hoveredIndex，避免快速切换图标时的状态混乱。
• 移除冲突过渡属性：删除p标签默认的transition，仅在过渡状态类中定义动画属性，防止属性叠加冲突。
• 规整过渡状态：统一定义进入/离开的起始与目标状态，确保动画触发逻辑清晰，无冗余属性干扰。

内容的提问来源于stack exchange，提问作者Alyx