<1 min read
StaggeredFadeAndSlide
StaggeredFadeAndSlide
Renders a transition group wrapping the elements passed in the default slot and animating them with a staggered fade and slide animation.
Props
Name | Description | Type | Default |
---|---|---|---|
appear | Indicates if the transition must be applied on the initial render of the node. | boolean | true |
tag | The tag of the node to render to the DOM. | string | 'div' |
stagger | The time in ms to stagger each item. | number | 25 |
Slots
Name | Description | Bindings (name - type - description) |
---|---|---|
default | None |
The Staggered fade and slide components works as the normal fade and slide components, but it also adds a configurable delay to each transition.
Example
Used with animatable components
<AnimatableComponent :animation="StaggeredFadeAndSlide" />
Used as a regular component:
This components exposes all the props and events of the Staggering transition group, like the tag
or the stagger
props:
<StaggeredFadeAndSlide tag="ul" :stagger="50">
<li key="1">Element to animate</li>
<li key="2">Element to animate</li>
<li key="3">Element to animate</li>
</StaggeredFadeAndSlide>