1

I am using tailwind ui to create a page using Vue.js - v.2

I've looked over this SO thread and I believe I have my transitions in the correct spot.

When I click the menu to show the <MobileSidebar> component, everything works great. When I close the <MobileSidebar> component, the component is just removed from the screen. I do not see the sidebar "slide" off of the browser.

I'm passing the open state as a prop; emitting the status. That seems to be working fine as well.

How can I allow the transition to render before the element is hidden/removed from view?

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

1 回答 1

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>
于 2021-10-28T19:23:15.517 回答