@empathyco/x-components
Version:
Empathy X Components
36 lines (23 loc) • 1.28 kB
Markdown
title: CrossFade
# CrossFade
Renders a transition wrapping the element passed in the default slot. The transition
fades between the two toggled elements at the same time.
## 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 `CrossFade` component is intended to be used as animation to wrap an element with v-if or v-show
and animate it. The animation fades the new element into the previous one.
Wrapping a component:
```vue
<CrossFade>
<ComponentOrElement v-if="open"/>
</CrossFade>
```