---

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