<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>