twbs / bootstrap / 31521008589

94%

main: 96%

push

github

Finish the CSS-first transition model (#42816)

* Document the v6 transition model

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.

* Give dialog, drawer, menu, and toast a transition-property token

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.

* Move alert, tab, tooltip, and popover off the shared .fade class

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,... (continued)

1757 of 1978 branches covered (88.83%)

Branch coverage included in aggregate %.

30 of 30 new or added lines in 4 files covered. (100.0%)

3602 of 3741 relevant lines covered (96.28%)

120.25 hits per line