Built-in Transitions
The library provides the following built-in transitions. Simply import base.css to include them.
Fade In / Fade Out
Provides 2 fade effects: fade-in-linear and fade-in
fade-in-linear
fade-in
Slide Left / Right
move-left
move-right
Zoom
Provides 4 zoom effects: zoom-in-center, zoom-in-top, zoom-in, and zoom-in-bottom
zoom-in-center
zoom-in-top
zoom-in
zoom-in-bottom
Move + Fade
Provides 3 special move-fade transitions: fade-transverse, fade-scale, fade-scale-move
fade-transverse
fade-scale
fade-scale-move
fade-down
Move Transition
When elements at the same position change, there may be layout shifts. This transition uses absolute positioning to overlay elements, allowing smooth switching between a group of content.
Collapse / Expand
Collapse and expand are also implemented as internal components. Simply wrap content with <b-collapse-transition> to use.
collapse-transition
collapse-transition