我正在使用Vue来实现当鼠标悬停在图片上时，通过动画将文本框向上移动并淡入。动画效果是正确的，但是它有一个轻微的延迟才开始。我希望文本框在图片悬停时能够平滑且立即地开始淡入和向上移动。当光标离开时，文本框能够正确地淡出和向下移动。

template: ` 
 
   
{{ badges[item].description }}
  
 
 `, 方法：{ 悬停开始(i){ this.hoveredIndex = i; }, 悬停结束（）{ this.hoveredIndex = null; } },

.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； };

我尝试给所有元素添加transition-delay: 0s，但没有作业。