Vue的transition组件在hover切换文本时淡入淡出动画不生效如何解决

问题原因 #

• 过渡组件内元素无唯一key：<transition> 仅在内部元素被销毁/重建时才会触发过渡流程。你当前代码里的.title和.description仅更新文本内容，Vue会复用原有DOM元素，不会触发过渡。
• 缺少过渡对应的CSS样式：你指定了过渡的name为component-fade，但没有定义对应类的动画规则，即使触发过渡也不会有视觉效果。

修改方案 #

1. 给过渡内部的元素添加唯一key #

修改template中transition包裹的节点，添加绑定key，确保切换currentOption时元素会被销毁重建：

<div class="text">
  <transition name="component-fade" mode="out-in">
    <div class="title" :key="`title-${currentOption}`">{{ options[currentOption - 1].name }}</div>
  </transition>
  <transition name="component-fade" mode="out-in">
    <div class="description" :key="`desc-${currentOption}`">
      {{ options[currentOption - 1].description }}
    </div>
  </transition>
</div>

2. 补充过渡样式 #

在style标签内添加component-fade对应的过渡类样式，实现淡入淡出效果：

// 适配Vue2的过渡类名
.component-fade-enter-active, 
.component-fade-leave-active {
  transition: opacity 0.3s ease;
}
.component-fade-enter, 
.component-fade-leave-to {
  opacity: 0;
}

修改完成后切换hover的圆形区域，红色框内的文本就会有淡入淡出的过渡效果。

内容的提问来源于stack exchange，提问作者CCCC