@empathyco/x-components
Version:
Empathy X Components
78 lines (57 loc) • 2.41 kB
Markdown
---
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>
```