FadeAndSlide

Renders a transition group wrapping the elements passed in the default slot and animating them with a fade and slide animation.

Props

Name	Description	Type	Default
tag	HTML Element that the transition-group children will be wrapped in.	string
appear	Indicates if the transition must be applied on the initial render of the node.	boolean	true

Slots

Name	Description	Bindings (name - type - description)
default	(Required) Transition-group content	None

Examples

The FadeAndSlide component is intended to be used as a prop in animatable components but also works as a wrapper of a transition group that can receive the tag it will render to as a prop.

Used as a prop in an animatable component

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

Used as a regular component passing the tag as prop

<template>
  <FadeAndSlide tag="ul">
    <li>Element to animate</li>
    <li>Element to animate</li>
    <li>Element to animate</li>
  </FadeAndSlide>
</template>
<script setup>
import FadeAndSlide from '@empathyco/x-components/js/components/animations/fade-and-slide.vue'
</script>

Example with dynamic content

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