<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
698
收藏
在Vue.js中，
transition组件允许您在元素插入、更新或从DOM中删除时添加过渡效果。默认情况下，Vue在元素插入或删除时应用过渡延迟，这给用户带来了更平滑的过渡效果。然而，如果您想去除过渡延迟，使元素立即出现或消失，您可以使用appear属性以及CSS过渡属性。以下是您可以实现此目的的示例：
appear属性的transition组件：<template> <transition appear name="fade"> <div v-if="showElement" class="element">要显示的元素</div> </transition> </template><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文档，以获取最准确和最新的信息。