VFadeTransition

The VFadeTransition component is a built-in transition component in the Vunix library that provides a simple fade-in and fade-out effect. This component leverages the powerful Vunix theming system and the ConfigTransitionConfig interface to offer extensive customization options for the fade effect. It works in the same way as the Vue Transition component, making it familiar and easy to use for developers.

Usage

To use the FadeTransition component, wrap the target element that you want to apply the fade effect to, just like you would with Vue's Transition component:

<template>
  <div class="inline-flex flex-col gap-4">
    <VFadeTransition>
      <div v-show="show">
        <slot />
      </div>
    </VFadeTransition>
    <VButton @click="show = !show">Click to {{ show ? 'hide' : 'show' }}</VButton>
  </div>
</template>
<script setup>
const show = ref(false)
</script>