Tailwind UI：为什么过渡只在输入时起作用？答案

【问题标题】：Tailwind UI: Why are transitions only working on enter?Tailwind UI：为什么过渡只在输入时起作用？
【发布时间】：2021-12-13 04:24:37
【问题描述】：

我正在使用tailwind ui 创建一个使用Vue.js 的页面 - v.2

我查看了this SO thread，并且我相信我的转换在正确的位置。

当我单击菜单显示<MobileSidebar> 组件时，一切正常很棒。当我关闭<MobileSidebar> 组件时，该组件刚刚从屏幕上移除。我没有看到侧边栏“滑出”浏览器。

我将打开状态作为道具传递；发出状态。这似乎也可以正常工作。

如何在元素被隐藏/从视图中移除之前渲染过渡？

App.vue

<template>
<MobileSidebar
    :open="sidebarOpen"
    @toggle-sidebar="toggleSidebar"
/>
</template>

<script>
...
data: () => ({
    sidebarOpen: false,
}),
methods: {
    toggleSidebar() {
      this.sidebarOpen = !this.sidebarOpen;
    },
}
</script>

MobileSidebar.vue


<template>
  <div
      class="fixed inset-0 flex z-40 lg:hidden"
      role="dialog"
      aria-modal="true"
      v-show="open"
  >

      <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>

【问题讨论】：

标签： vue.js vuejs2 tailwind-css tailwind-ui

【解决方案1】：

问题是仍然我没有 <transition> 包裹最外面的 div。

这工作正常：

MobileSidebar.vue


<template>
    <transition
        enter-active-class="transition-opacity ease-linear duration-300"
        enter-class="opacity-0"
        enter-to-class="opacity-100"
        leave-active-class="transition-opacity ease-linear duration-300"
        leave-class="opacity-100"
        leave-to-class="opacity-0"
     >
  <div
      class="fixed inset-0 flex z-40 lg:hidden"
      role="dialog"
      aria-modal="true"
      v-show="open"
  >
  ...
  </div>
</transition>

【讨论】：