Move Toast transitions to CSS with @starting-style - #42783
Merged
Conversation
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
force-pushed
the
mdo/toast-css-transitions
branch
from
August 5, 2026 22:43
422138c to
6753e0b
Compare
3 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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.hideclass to fake an exit animation. Menu, Dialog, and Drawer already express this in CSS..toastitself, with@starting-stylefor the entry state and a discretedisplaytransition so the toast stays laid out while it fades out. JS now only toggles.show.--toast-transition-durationand--toast-transition-timingtokens.animationoption anddata-bs-animation. Add.toast-instantto skip the animation, matching.dialog-instantand.drawer-instant..showingclass, the deprecated.hideclass, the.fadetoggle, and thereflow()call fromtoast.ts. Alpha is the right time to drop these rather than ship them.isShown()now returnsfalseas soon ashide()is called, rather than when the fade-out ends. This is inherent toallow-discreteand is noted in the migration guide.showingclass 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: flexat opacity 0.61 partway through the fade-out and fireshidden.bs.toastat 146ms;.toast-instantreports 0ms for both events. Underprefers-reduced-motion: reducethe duration drops to 0s and the events still fire through the existingexecuteAfterTransitionfallback.Supersedes #42101, which proposed replacing the autohide timer with a CSS animation driven by
--bs-toast-delay. That approach turnedautohide: falseinto a99999ssentinel, firedshown/hiddensynchronously, 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.