Vue2使用Tailwind UI时过渡动画仅进入生效、退出无效果如何解决？

问题根因 #

MobileSidebar组件的最外层容器直接绑定了v-show="open"，当open变为false时，最外层容器会立即隐藏，内部两个transition的离开动画还未执行就被销毁，因此看不到滑出和渐变消失的效果。

修复方案 #

仅需修改MobileSidebar.vue的模板部分即可：

1. 移除最外层div上的v-show="open"属性
2. 给最外层div新增点击事件拦截控制，避免关闭状态下拦截页面点击

修改后代码参考：

<template>
  <div
      class="fixed inset-0 flex z-40 lg:hidden"
      :class="open ? 'pointer-events-auto' : 'pointer-events-none'"
      role="dialog"
      aria-modal="true"
  >

      <transition
        enter-active-class="transition-opacity ease-in-out duration-300"
        enter-class="opacity-0"
        enter-to-class="opacity-100"
        leave-active-class="transition-opacity ease-in-out duration-300"
        leave-class="opacity-100"
        leave-to-class="opacity-0"
     >
         <div
          class="fixed inset-0 bg-gray-600 bg-opacity-75"
          aria-hidden="true"
          v-show="open"
         ></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-active-class="transition ease-in-out duration-300 transform"
        leave-class="translate-x-0"
        leave-to-class="-translate-x-full"
    >
      <div
          class="relative flex-1 flex flex-col max-w-xs w-full bg-white focus:outline-none"
          v-show="open"
      >
          ...
      </div>
    </transition>
  </div>
</template>

<script>
...
methods: {
    toggleSidebar() {
      this.$emit("toggle-sidebar");
    },
  },
props: {
    open: {
      type: Boolean,
      required: true,
      default: false,
    },
},
</script>

修改后关闭侧边栏时，会先执行300ms的遮罩渐变和侧边栏滑出动画，动画结束后元素才会隐藏，符合预期效果。

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