Vue搭配Tailwind实现侧边栏时过渡进入正常但退出动画失效

DevOps 小满

2026-9-25

问题修复方案

核心问题原因

最外层包裹整个弹窗的div绑定了v-show="mobileMenuOpen"，触发关闭时根节点直接隐藏，内部过渡组件还没执行离开动画就被销毁，是动画失效的核心原因
遮罩层过渡的leave-class配置错误：离开动画的起始状态应该是完全不透明的opacity-100，你当前配置的opacity-0会导致离开动画起始就完全透明，看不到过渡效果
侧边栏过渡组件未给直接子元素绑定v-show触发条件，也没有闭合标签，无法触发离开过渡

修正后代码

<!-- 移除最外层根div的v-show，把显示条件移到内部过渡的子元素上 -->
<div class="fixed inset-0 flex z-40 lg:hidden" role="dialog" aria-modal="true">
    
    <transition 
      enter-class="opacity-0"
      enter-active-class="transition-opacity ease-linear duration-300" 
      enter-to-class="opacity-100"  
      leave-class="opacity-100" <!-- 修正离开起始状态为不透明 -->
      leave-active-class="transition-opacity ease-linear duration-300" 
      leave-to-class="opacity-0"  
    >
      <div 
        class="fixed inset-0 bg-black bg-opacity-25" 
        aria-hidden="true"  
        v-show="mobileMenuOpen" 
        @click="closeMobileMenu"
      ></div>
    </transition>

    <transition 
      enter-active-class="transition ease-in-out duration-300 transform" 
      enter-class="-translate-x-full"
      enter-to-class="translate-x-0"  
      leave-class="translate-x-0"
      leave-active-class="transition ease-in-out duration-300 transform" 
      leave-to-class="-translate-x-full" 
      appear 
    >
      <!-- 给侧边栏根元素绑定v-show触发过渡 -->
      <div v-show="mobileMenuOpen" class="w-64 bg-white shadow-lg">
        你的侧边栏代码写在这里
      </div>
    </transition>
</div>