Vue Transition 表单提交后按钮切换淡入淡出失效原因求解

问题根因 #

• 缺失配套的过渡CSS规则：<transition> 组件仅负责在元素进出场时自动挂载对应的状态类名，不会自动生成淡入淡出的动画效果，你当前代码里只指定了过渡的name="fade"，但完全没有定义.fade-enter-active、.fade-leave-active等对应类的样式规则，自然会出现瞬时切换的效果。
• 同标签元素无唯一标识导致DOM复用：两个按钮都是原生<button>标签，结构高度相似，没有绑定唯一key值时，Vue 在更新DOM时会默认复用已存在的节点，不会触发完整的元素进出场流程，即使写了CSS过渡规则也不会生效。
• 冗余的双v-if判断没必要：两个分支的判断逻辑是完全互斥的，重复写两个v-if反而增加了Transition组件识别切换状态的判断成本。

可直接落地的修复步骤 #

1. 先补充缺失的过渡样式规则，根据你使用的Vue版本匹配对应的类名（Vue3用*-from，Vue2用*-enter/*-leave）：

   /* Vue3 版本的淡入淡出规则 */
   .fade-enter-active,
   .fade-leave-active {
     transition: opacity 0.3s ease;
   }
   .fade-enter-from,
   .fade-leave-to {
     opacity: 0;
   }
   
   /* 如果是Vue2项目，把上面的类名替换成下面的即可 */
   /* .fade-enter,
   .fade-leave-to {
     opacity: 0;
   }
   .fade-enter-active,
   .fade-leave-active {
     transition: opacity 0.3s ease;
   } */
   

2. 调整模板内的按钮逻辑，用v-else替代重复的v-if，给两个按钮加唯一key强制触发过渡识别：

   <transition name="fade" mode="out-in">
     <button
       v-if="!valid"
       key="submit-action"
       class="my-3 px-4 py-3 rounded-md shadow-sm text-base font-medium text-white-primary bg-red-primary hover:bg-red-secondary"
       @click="checkForm"
     >
       Request Beta Access
     </button>
     <button
       v-else
       key="submit-success"
       class="my-3 px-4 py-3 rounded-md shadow-sm text-base font-medium text-white-primary bg-green-300 hover:bg-red-secondary"
     >
       Request Sended
     </button>
   </transition>
   

3. 你写的setTimeout模拟后端请求的逻辑不需要做任何改动，只要完成上面两步调整，配合mode="out-in"模式，就能实现「原按钮淡出、提示按钮淡入、停留2秒后切回原按钮」的完整效果，也不会出现两个按钮同时占位的布局抖动。

小提示：如果写了CSS还是没效果，可以检查下全局样式有没有把button的transition属性覆盖掉，目前你用到的自定义颜色类、圆角类本身和过渡逻辑没有冲突，不需要调整。

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