Finish the CSS-first transition model - #42816
Open
mdo wants to merge 7 commits into
Open
Conversation
Bootstrap now animates components in CSS and lets JavaScript toggle one state class, but that rule only lived in the migration guide. Add a Customize page that names the state classes, the token trio, and the four ways to remove the motion, so component migrations have one contract to follow.
These four components exposed a duration and an easing token but hard-coded
the property list, so a slide meant rewriting the whole declaration. Each one
now reads --{name}-transition-property, which also let the dialog and the
drawer drop their duplicate open-state transition: one list covers both
directions because visibility interpolates as a step that stays visible while
either end is.
The accordion panel gets the same trio, in place of a hard-coded .2s that
ignored the component tokens.
These four components animated through a generic .fade class that authors had to remember, and they sequenced the animation from JavaScript. Each one now declares its own transition and its own token trio in CSS, as the toast already did, and animates by default: - An alert fades out from a .hiding class, because an alert is visible in the markup with or without .show, so the absence of .show cannot mark the exit. - A tab pane fades in from @starting-style. The plugin adds .active and .show in the same frame instead of waiting a transition between them. The outgoing pane still leaves at once, since two in-flow panes cannot cross-fade without one stacking under the other. - A tooltip or popover fades in from @starting-style. `animation: false` now adds .tooltip-instant or .popover-instant, the same class an author can add. The JavaScript reads the computed transition duration instead of looking for a class, so .transition-none, an -instant class, reduced motion, and $enable-transitions all resolve the promise at once. .fade stays for author markup, and it is harmless where it remains, but no component depends on it.
The plugin measured the content and wrote inline sizes to fake a height animation. CSS can do it: `interpolate-size` interpolates `0` to the `auto` of the open state, so the plugin only toggles `.show`. This drops the `.collapsing` class and the size math, and matches the accordion. Also raise the CSS bundlewatch ceilings for this transition series.
v6 removed the deprecated class, so the note about keeping it for backwards compatibility no longer applies.
The wrapper reserved 120px, but the open card measures 138px in the docs, so the content below it jumped on open.
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
1 participant
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.
--*-transition-propertyto dialog, drawer, menu, and toast, and fixes the accordion's hardcoded::details-contenttiming.fade. Each declares its own transition and tokens;.fadestays for author markupinterpolate-size, dropping.collapsingand the JS size mathCloses #28968