Transitions

Nexa provides a built-in <Transition> component that helps you animate elements entering and leaving the DOM.

CSS Transitions

The simplest way to use transitions is by providing a name. Nexa will automatically apply CSS classes during the lifecycle of the transition.

<template>
  <button @click="show.value = !show.value">Toggle</button>
  
  <Transition name="fade">
    <div v-if="show.value">Hello Nexa!</div>
  </Transition>
</template>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

Transition Classes

There are 6 classes applied for enter/leave transitions:

1. v-enter-from: Starting state for enter.
2. v-enter-active: Applied during the entire entering phase.
3. v-enter-to: Ending state for enter.
4. v-leave-from: Starting state for leave.
5. v-leave-active: Applied during the entire leaving phase.
6. v-leave-to: Ending state for leave.

JavaScript Hooks

For more complex animations, you can use JavaScript hooks. These are useful for integrating with libraries like GSAP or Anime.js.

<template>
  <Transition
    @before-enter="onBeforeEnter"
    @enter="onEnter"
    @leave="onLeave"
  >
    <div v-if="show.value">Animated with JS</div>
  </Transition>
</template>

<script setup>
function onBeforeEnter(el) {
  el.style.opacity = 0
}

function onEnter(el, done) {
  // Use your favorite animation library
  gsap.to(el, {
    opacity: 1,
    duration: 0.5,
    onComplete: done
  })
}

function onLeave(el, done) {
  gsap.to(el, {
    opacity: 0,
    duration: 0.5,
    onComplete: done
  })
}
</script>

Available hooks:

• onBeforeEnter(el)
• onEnter(el, done)
• onAfterEnter(el)
• onBeforeLeave(el)
• onLeave(el, done)
• onAfterLeave(el)