@empathyco/x-components
Version:
Empathy X Components
55 lines (42 loc) • 1.61 kB
Markdown
---
title: Fade
---
# Fade
Renders a transition wrapping the element passed in the default slot. The animation just fades
in/out the element by changing its opacity.
## Props
| Name | Description | Type | Default |
| ------------------- | ------------------------------------------------------------------------------ | -------------------- | ----------------- |
| <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) to add content to the transition | None |
## Example
The `Fade` component is intended to be used as animation to wrap an element with v-if or v-show and
animate it. The animation just fades in/out the element by changing its opacity.
Wrapping a component:
```vue live
<template>
<div>
<button @click="shouldRender = !shouldRender">Toggle</button>
<Fade>
<p v-if="shouldRender">León is southern Spain</p>
</Fade>
</div>
</template>
<script>
import { Fade } from '@empathyco/x-components'
export default {
name: 'FadeAnimationDemo',
components: {
Fade,
},
data() {
return {
shouldRender: false,
}
},
}
</script>
```