📊 Capítulo 11: Tailwind & Transitions

Especialização em Frontend com Vue.js

🗺️ O Sistema de Classes de Animação do `<Transition>` do Vue

flowchart LR
    subgraph ENTER ["Entrada do Elemento (Aparece na tela)"]
        E1["v-enter-from (Estado Inicial)"]
        --> E2["v-enter-active (Duração, Curva de Transição)"]
        --> E3["v-enter-to (Estado Final Estável)"]
    end

    subgraph LEAVE ["Saída do Elemento (Some da tela)"]
        L1["v-leave-from (Estado Inicial)"]
        --> L2["v-leave-active (Duração, Curva de Transição)"]
        --> L3["v-leave-to (Estado Oculto / Opacidade Zero)"]
    end

    style ENTER fill:#e8f5e9,stroke:#4caf50,stroke-width:2px
    style LEAVE fill:#ffebee,stroke:#d32f2f,stroke-width:2px

🎯 Slide 1: `<Transition>` Nativo com Tailwind CSS

<Transition
  enter-active-class="transition duration-300 ease-out"
  enter-from-class="opacity-0 scale-95"
  enter-to-class="opacity-100 scale-100"
  leave-active-class="transition duration-200 ease-in"
  leave-from-class="opacity-100 scale-100"
  leave-to-class="opacity-0 scale-95"
>
  <div v-if="aberto" class="modal-card">...</div>
</Transition>

🎯 Slide 2: `<TransitionGroup>` para Listas

Anima automaticamente a inserção, remoção e reordenação física de itens dentro de listas com a classe especial v-move!

🎯 Slide 3: Componentes Headless (Radix Vue / Headless UI)

Fornecem lógica completa de acessibilidade WAI-ARIA (teclado, focus trapping) sem nenhum CSS acoplado, permitindo estilização 100% livre com Tailwind!