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
appear	Indicates if the transition must be applied on the initial render of the node.	boolean	true

Slots

Name	Description	Bindings (name - type - description)
default	(Required) to add content to the transition	None

Examples

The CrossFade component is intended to be used as an animation to wrap an element with v-if or v-show and animate it. The animation fades the new element into the previous one.

Basic example using v-if

<template>
  <CrossFade>
    <ComponentOrElement v-if="open" />
  </CrossFade>
</template>
<script setup>
import { ref } from 'vue'
import CrossFade from '@empathyco/x-components/js/components/animations/cross-fade.vue'
const open = ref(false)
</script>

Usage with v-show

<template>
  <CrossFade>
    <ComponentOrElement v-show="open" />
  </CrossFade>
</template>
<script setup>
import { ref } from 'vue'
import CrossFade from '@empathyco/x-components/js/components/animations/cross-fade.vue'
const open = ref(true)
</script>

Example with dynamic content

<template>
  <div>
    <button @click="open = !open">Toggle</button>
    <CrossFade>
      <div v-if="open" style="background: #eee;">Expanded content</div>
      <div v-else style="background: #ccc;">Collapsed content</div>
    </CrossFade>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import CrossFade from '@empathyco/x-components/js/components/animations/cross-fade.vue'
const open = ref(false)
</script>