---

title: FadeAndSlide

---

# 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           |
| ------------------- | ------------------------------------------------------------------------------ | -------------------- | ----------------- |
| <code>tag</code>    | HTML Element that the transition-group children will be wrapped in.            | <code>string</code>  | <code></code>     |
| <code>appear</code> | Indicates if the transition must be applied on the initial render of the node. | <code>boolean</code> | <code>true</code> |

## Slots

| Name                 | Description                         | Bindings<br />(name - type - description) |
| -------------------- | ----------------------------------- | ----------------------------------------- |
| <code>default</code> | (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

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

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

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