如何在Vue过渡中去除过渡延迟？

Question

<p>我正在使用Vue来实现当鼠标悬停在图片上时，通过动画将文本框向上移动并淡入。动画效果是正确的，但是它有一个轻微的延迟才开始。我希望文本框在图片悬停时能够平滑且立即地开始淡入和向上移动。当光标离开时，文本框能够正确地淡出和向下移动。</p> <pre class="brush:php;toolbar:false;">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> `, 方法：{ 悬停开始(i){ this.hoveredIndex = i; }, 悬停结束（）{ this.hoveredIndex = null; } },</pre>

.attribute-icons {
                    顶部边距：5px；
                    职位：亲属；
                    转换延迟：0s；

                    图像{
                        宽度：28px；
                        高度：28像素；
                        右边距：8px；
                        过渡：0.24s；
                        转换延迟：0s；
                        
                    }

                    p {
                        位置：绝对；
                        顶部：20 像素；
                        宽度：19vw；
                        最大宽度：350px；
                        最小宽度：175px；
                        背景：#0088ce；
                        颜色：#ffffff；
                        z 索引：1；
                        边框半径：5px；
                        内边距：5px 10px；
                        盒子阴影: 0 0 18px rgba(2, 2, 2, 0.14);
                        指针事件：无；
                        字体粗细：500；
                        字体大小：13px；
                        过渡：0.24s缓和；
                        转换延迟：0s；
                        @media（最大宽度：1100px）{
                            宽度：25vw；
                        }
                        @media（最大宽度：991px）{
                            宽度：36vw；
                        }

                    }

                    .v-输入-来自{
                        不透明度：0；
                        变换：translateY(10px);
                        过渡：不透明度 0.24s 缓动，变换 0.24s 缓动；
                        转换延迟：0s；
                    };
                    .v-输入-活动{
                        转换延迟：0s；
                        过渡：不透明度 0.24s 缓动，变换 0.24s 缓动；
                        变换：翻译Y(4px)；
                    };
                    .v-输入-到{

                    };

                    .v-离开-来自{
                        变换：translateY(10px);
                    };
                    .v-离开活动{
                        过渡：不透明度 0.24s 缓动，变换 0.24s 缓动；
                        变换：translateY(10px);
                    };
                    .v-离开-至{
                        不透明度：0；
                    };</pre>
<p>我尝试给所有元素添加transition-delay: 0s，但没有作业。</p>

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文档，以获取最准确和最新的信息。