Base UITransitions

Dialog

Close and reopen part way through the exit. The transition picks up from where it was.

Every value the manifest allows on this host, single presets and the pairs that compose. The first is what this component ships with. Both stages are the same component, so anything that changes between them is the attribute.

withoutno attribute

with easefuldata-motion="scale-fade"

host writes

data-open / data-closed, plus data-ending-style

easeful matches

[data-motion~="scale-fade"][data-ending-style]

what runs

transition: opacity, scale 150ms

you write

<Dialog.Popup data-motion="scale-fade" />

Where the attribute goes

The parts this demo composes, and the value each one carries. Everything inside an animated part is that part's content, so the tree stops there.

Dialog.Root
Dialog.Trigger
Dialog.Portal
Dialog.Backdropdata-motion="fade"
Dialog.Popupdata-motion="scale-fade"

Source

apps/docs/components/demos/base-ui/dialog.tsx

26 lines

"use client"

import { Dialog } from "@base-ui/react/dialog"
import type { DemoProps } from "@/components/demos/props"

export function BaseUiDialog({ motion }: DemoProps) {
  return (
    <Dialog.Root>
      <Dialog.Trigger className="btn">Open dialog</Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Backdrop className="scrim" data-motion={motion && "fade"} />
        <Dialog.Popup className="modal" data-motion={motion}>
          <Dialog.Title className="panel__title">Publish this release</Dialog.Title>
          <Dialog.Description className="panel__body">
            Close it and reopen part way through the exit. The transition picks up from where it
            was rather than jumping back to the start.
          </Dialog.Description>
          <div className="modal__actions">
            <Dialog.Close className="btn btn--primary">Publish</Dialog.Close>
            <Dialog.Close className="btn">Cancel</Dialog.Close>
          </div>
        </Dialog.Popup>
      </Dialog.Portal>
    </Dialog.Root>
  )
}

The whole file, read from disk at build time. Both copies above render from it, and the motion prop is the only difference between them.