用Tailwind CSS实现打开的过渡效果

前端开发 2026-07-09

我想在打开模态的 <dialog> 元素时，通过把它滑入屏幕来实现过渡效果。然而，我只能让它实现从屏幕滑出的过渡，无法实现滑入。我已经阅读了MDN关于对话框动画的部分，并且认为自己已经按正确的做法来实现，但也许我漏掉了什么。

以下是代码片段：

<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 translate-y-full w-full max-w-none rounded-t-xl bg-white p-6 shadow-2xl transition-[translate,opacity,display,overlay] duration-200 ease-out transition-discrete open:translate-y-0 open:opacity-100 starting:translate-y-full starting:opacity-0 backdrop:bg-black/50 backdrop:transition-opacity backdrop:duration-200 backdrop:starting: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>

解决方案

打开时，dialog 突然从 display: none 变为可见的 open 状态。starting:open:* 在此时定义了临时起始状态，而 open:* 定义了浏览器将动画过渡到的最终状态。

因此请使用 starting:open:translate-y-full starting:open:opacity-0 代替 starting:translate-y-full starting:opacity-0。

<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 rounded-t-xl bg-white p-6 shadow-2xl
    fixed inset-x-0 top-auto bottom-0 m-0 translate-y-full w-full max-w-none
    backdrop:bg-black/50

    transition-[translate,opacity,display,overlay] duration-200 ease-out transition-discrete
    backdrop:transition-opacity backdrop:duration-200

    translate-y-full opacity-0
    open:translate-y-0 open:opacity-100
    starting:open:translate-y-full starting:open:opacity-0

    backdrop:starting: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>

Tailwind CSS