HeadlessUI Dialog 组件无论是否在过渡元素中都会立即呈现答案

【问题标题】：HeadlessUI Dialog component renders instantly regardless of whether it is in a transition elementHeadlessUI Dialog 组件无论是否在过渡元素中都会立即呈现
【发布时间】：2022-07-09 10:58:19
【问题描述】：

我试图在 Nuxt.js 中打开一个带有过渡的对话框，但它总是立即呈现。

<template>
  <div>
    <TransitionRoot
      :show="isOpen"
      enter="transition-opacity duration-300"
      enter-from="opacity-0"
      enter-to="opacity-100"
      leave="transition-opacity duration-300"
      leave-from="opacity-100"
      leave-to="opacity-0"
      as="template"
    >
      <div>
        Text outside of Dialog
        <Dialog as="div" class="relative z-10">Text inside of dialog</Dialog>
      </div>
    </TransitionRoot>
  </div>
</template>

<script setup>
import { TransitionRoot, Dialog, DialogPanel, DialogTitle, TransitionChild, DialogDescription } from '@headlessui/vue'

defineProps({
  isOpen: Boolean,
})
</script>

Dialog 外面的文字会使用转场，但是里面的文字会立即弹出。 HeadlessUI 网站上也使用了这种结构，但内容确实淡入了。有谁知道如何解决这个问题？

【问题讨论】：

标签： vue.js nuxt.js headless-ui

【解决方案1】：

尝试将 headless ui 更新到 1.6.6

他们最近修复了一些对话框问题

https://github.com/tailwindlabs/headlessui/pull/1653

【讨论】：