HeadlessUI Dialog嵌套在TransitionRoot内仍瞬间渲染无过渡问题

你遇到的Dialog内容无过渡、外层文本过渡正常的问题，核心是两个写法错误：

• 没有给<Dialog>组件传入必填的open属性。Dialog作为HeadlessUI的状态型组件，自身的内容渲染、销毁生命周期完全由open prop控制，外层套的TransitionRoot只能控制普通DOM子节点的过渡效果，根本干预不到Dialog内部基于自身状态的渲染逻辑，两者的状态完全脱节，所以Dialog内容会直接瞬间渲染。
• 组件嵌套顺序写反了。TransitionRoot不应该包裹在Dialog外层，而是要放在Dialog组件的内部，配合DialogPanel、TransitionChild实现分层过渡，这也是你觉得自己写法和官网一致但实际跑不通的核心偏差——你把两个组件的父子关系搞反了。

按照以下步骤调整代码即可：

1. 将<Dialog>调整为弹窗的根组件，绑定:open="isOpen"，同时补充必填的@close事件处理方法
2. 把<TransitionRoot>移动到Dialog的直接子级位置，:show属性绑定同一个isOpen状态
3. 弹窗的可交互内容必须放在<DialogPanel>组件内部，如果需要给面板加独立的位移/缩放过渡，给DialogPanel外层套<TransitionChild>配置对应过渡类即可。

<template>
  <div>
    <!-- 页面常驻内容不需要放在过渡组件内 -->
    Text outside of Dialog
    <button @click="isOpen = true">打开弹窗</button>

    <!-- Dialog作为弹窗根组件，绑定open状态 -->
    <Dialog 
      :open="isOpen" 
      @close="isOpen = false" 
      class="relative z-10"
      as="template"
    >
      <!-- TransitionRoot放在Dialog内部，控制整体淡入淡出 -->
      <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 class="fixed inset-0 bg-black/25" />
        
        <!-- 弹窗容器 -->
        <div class="fixed inset-0 flex items-center justify-center p-4">
          <!-- 用TransitionChild给面板加独立过渡，不需要可以去掉直接用DialogPanel -->
          <TransitionChild
            as="template"
            enter="transition-all duration-300 ease-out"
            enter-from="opacity-0 scale-95 translate-y-4"
            enter-to="opacity-100 scale-100 translate-y-0"
            leave="transition-all duration-200 ease-in"
            leave-from="opacity-100 scale-100 translate-y-0"
            leave-to="opacity-0 scale-95 translate-y-4"
          >
            <DialogPanel class="w-full max-w-md rounded-lg bg-white p-6 shadow-xl">
              Text inside of dialog
              <button @click="isOpen = false">关闭</button>
            </DialogPanel>
          </TransitionChild>
        </div>
      </TransitionRoot>
    </Dialog>
  </div>
</template>

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

const isOpen = ref(false)
</script>

• 不要把isOpen的初始值在服务端渲染阶段设为true，否则会出现hydration不匹配导致过渡失效，初始值统一设为false，在客户端挂载后再根据需求修改状态。
• 如果开启了HeadlessUI的自动导入，不要在script中手动重复导入组件，避免多版本实例冲突导致状态同步异常。

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