Skip to content

Move Toast transitions to CSS with @starting-style - #42783

Merged
mdo merged 1 commit into
v6-devfrom
mdo/toast-css-transitions
Aug 6, 2026
Merged

Move Toast transitions to CSS with @starting-style#42783
mdo merged 1 commit into
v6-devfrom
mdo/toast-css-transitions

Conversation

@mdo

@mdo mdo commented Aug 2, 2026

Copy link
Copy Markdown
Member

Toast was the last component still using the v4-era show dance: JS toggled .fade, forced a reflow, then juggled .show, .showing, and a deprecated .hide class to fake an exit animation. Menu, Dialog, and Drawer already express this in CSS.

  • Move the fade onto .toast itself, with @starting-style for the entry state and a discrete display transition so the toast stays laid out while it fades out. JS now only toggles .show.
  • Add --toast-transition-duration and --toast-transition-timing tokens.
  • Remove the animation option and data-bs-animation. Add .toast-instant to skip the animation, matching .dialog-instant and .drawer-instant.
  • Remove the .showing class, the deprecated .hide class, the .fade toggle, and the reflow() call from toast.ts. Alpha is the right time to drop these rather than ship them.
  • isShown() now returns false as soon as hide() is called, rather than when the fade-out ends. This is inherent to allow-discrete and is noted in the migration guide.
  • Drop the now-dead showing class from the PurgeCSS safelist in the optimize docs.

Verified in Chromium against the built bundle, since the unit tests run without stylesheets loaded. The animated toast holds display: flex at opacity 0.61 partway through the fade-out and fires hidden.bs.toast at 146ms; .toast-instant reports 0ms for both events. Under prefers-reduced-motion: reduce the duration drops to 0s and the events still fire through the existing executeAfterTransition fallback.

Supersedes #42101, which proposed replacing the autohide timer with a CSS animation driven by --bs-toast-delay. That approach turned autohide: false into a 99999s sentinel, fired shown/hidden synchronously, and changed pause-on-hover from restart to resume. This PR takes the transition modernization from that proposal and leaves the autohide timer in JS.

@mdo
mdo requested review from a team as code owners August 2, 2026 22:18
Toast still used the v4-era show dance: JS toggled `.fade`, forced a
reflow, then juggled `.show`, `.showing`, and a deprecated `.hide` class
to fake an exit animation. Menu, Dialog, and Drawer already express this
in CSS, so Toast was the last component carrying the old pattern.

The fade now lives on `.toast` itself, using `@starting-style` for the
entry state and a discrete `display` transition so the toast stays laid
out while it fades out. JS only toggles `.show`.

Replace the `animation` option with a `.toast-instant` class, matching
`.dialog-instant` and `.drawer-instant`. Alpha is the right time to drop
the `.showing` and `.hide` compatibility classes rather than ship them.
@mdo
mdo force-pushed the mdo/toast-css-transitions branch from 422138c to 6753e0b Compare August 5, 2026 22:43
@mdo
mdo merged commit bb354e8 into v6-dev Aug 6, 2026
12 checks passed
@mdo
mdo deleted the mdo/toast-css-transitions branch August 6, 2026 15:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant