VCollapseTransition

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

Usage

The VCollapseTransition component works similarly to the Vue Transition component. Wrap the element you want to animate within the VCollapseTransition component, and the element will automatically animate when it's added or removed from the DOM, such as when using v-if or v-show.

<template>
  <div class="flex flex-col">
    <VCollapseTransition>
      <div v-show="show">
        <slot />
      </div>
    </VCollapseTransition>
    <VButton @click="show = !show" class="mt-4">Toggle</VButton>
  </div>
</template>
<script setup>
const show = ref(false)
</script>