Componenta <Transition> în Vue 3 în Vue.js & Nuxt

Ce este componenta

Componenta <Transition> orchestrează tranzițiile fluide pentru un singur element sau componentă condiționată prin v-if sau v-show. Vue detectează automat regulile CSS sau evenimentele JavaScript și aplică clase speciale în etapele cheie:

• v-enter-from / v-enter-active / v-enter-to: animarea intrării în ecran.
• v-leave-from / v-leave-active / v-leave-to: animarea dispariției liniare.

<template>
  <button @click="afiseaza = !afiseaza">Comută Notificare</button>
  <Transition name="fade">
    <div v-if="afiseaza" class="alerta">Mesaj cu animație fluidă!</div>
  </Transition>
</template>

<style>
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
</style>