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

Examples

The StaggeredFadeAndSlide component works like the normal fade and slide components, but adds a configurable delay to each transition.

Used with animatable components

<template>
  <AnimatableComponent :animation="StaggeredFadeAndSlide" />
</template>
<script setup>
import StaggeredFadeAndSlide from '@empathyco/x-components/js/components/animations/staggered-fade-and-slide.vue'
</script>

Used as a regular component

This component exposes all the props and events of the transition group, like the tag or the stagger props:

<template>
  <StaggeredFadeAndSlide tag="ul" :stagger="50">
    <li v-for="item in items" :key="item">{{ item }}</li>
  </StaggeredFadeAndSlide>
  <button @click="addItem">Add Item</button>
</template>
<script setup>
import { ref } from 'vue'
import StaggeredFadeAndSlide from '@empathyco/x-components/js/components/animations/staggered-fade-and-slide.vue'
const items = ref(['One', 'Two', 'Three'])
function addItem() {
  items.value.push(`Item ${items.value.length + 1}`)
}
</script>