如何在Vue过渡中去除过渡延迟?
P粉757432491
P粉757432491 2023-08-17 17:36:49
[Vue.js讨论组]
<p>我正在使用Vue来实现当鼠标悬停在图片上时,通过动画将文本框向上移动并淡入。动画效果是正确的,但是它有一个轻微的延迟才开始。我希望文本框在图片悬停时能够平滑且立即地开始淡入和向上移动。当光标离开时,文本框能够正确地淡出和向下移动。</p> <pre class="brush:php;toolbar:false;">template: ` &lt;div&gt; &lt;div class="attribute-icons" v-for="(item, i) in techBadges" :key="'tech_' + i"&gt; &lt;img @mouseenter="hoverStart(i)" @mouseleave="hoverEnd" class="attribute-icon" width="30px" height="30px" :src="badges[item].imageSrc" :alt="badges[item].alt"/&gt; &lt;Transition&gt; &lt;p v-show="hoveredIndex === i"&gt;{{ badges[item].description }}&lt;/p&gt; &lt;/Transition&gt; &lt;/div&gt; &lt;/div&gt; `, 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>
P粉757432491
P粉757432491

全部回复(1)
P粉478188786

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号