如何在Vue过渡中去除过渡延迟？-PHP中文网问答

<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> `, methods:{ hoverStart(i){ this.hoveredIndex = i; }, hoverEnd(){ this.hoveredIndex = null; } },</pre> <pre class="brush:php;toolbar:false;">.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; };</pre> <p>我尝试给所有元素添加transition-delay: 0s，但没有起作用。</p>

全部回复(1)

P粉4781887862023-08-18 12:16:43 1楼

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

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

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

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

在您的组件样式部分或全局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文档，以获取最准确和最新的信息。