使用Tailwind CSS实现<dialog>打开时滑入过渡动画的问题

问题出在你给过渡属性里加了display和overlay——这俩属性不支持CSS过渡，直接打断了打开时的动画触发逻辑。另外starting:类的配置和默认样式重复，也会影响动画初始化。

修正方案 #

1. 删掉过渡列表里的display和overlay，只保留translate和opacity这俩可过渡属性
2. 把初始状态（底部隐藏、完全透明）直接设为dialog的默认样式，去掉冗余的starting:类

修改后的完整代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss-browser/4.1.13/index.global.js"></script>
<button commandfor="c1-modal" command="show-modal" class="p-2 border rounded-xl m-4">Show</button>
<dialog closedby="any" class="border border-b-0 border-slate-200 bg-white fixed inset-x-0 top-auto bottom-0 m-0 w-full max-w-none rounded-t-xl bg-white p-6 shadow-2xl transition-[translate,opacity] duration-200 ease-out transition-discrete translate-y-full opacity-0 open:translate-y-0 open:opacity-100 backdrop:bg-black/50 backdrop:transition-opacity backdrop:duration-200 backdrop:opacity-0 backdrop:open:opacity-100" id="c1-modal">
  <div class="text-text-primary-light dark:text-text-primary-dark flex justify-between">
    <h2 class="text-2xl">Hello there</h2>
    <button command="close" commandfor="c1-modal">
      <span aria-hidden="true" class="material-symbols-outlined text-2xl">close</span>
    </button>
  </div>
</dialog>

原理说明 #

• 去掉不可过渡属性后，CSS能正确识别translate和opacity的状态变化，触发打开时的滑入+淡入动画
• 默认样式直接设置初始隐藏状态，当dialog被添加open属性时，Tailwind的open:类会自动覆盖默认样式，完成平滑过渡
• 背景遮罩的过渡逻辑不受影响，依然能正常淡入淡出

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