顺风离开的Vue侧边栏转换不起作用

Question

我正在尝试让它与下面的链接相关的侧边栏工作 https://tailwindui.com/components/ecommerce/components/store-navigation

在叠加和向后滑动时输入有效但离开无效。

这是我的代码：

<div class="fixed inset-0 flex z-40 lg:hidden" role="dialog" aria-modal="true" v-show="mobileMenuOpen">
    
    <transition 
      enter-class="opacity-0"
      enter-active-class="transition-opacity ease-linear duration-300" 
      enter-to-class="opacity-100"  
      leave-class="opacity-0"
      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 

    > sidebar code


```

Thanks in advance

Answer 1

您的休假起始状态是opacity-0 尝试将其更改为opacity-100

...
leave-class="opacity-100"
...

v-leave：离开的开始状态。触发离开过渡时立即添加，一帧后删除。