✨ Exemplo 09 - x-transition Animações

1. x-transition Simples

Transição suave padrão!
x-transition sem modificadores usa transição padrão (fade)

2. x-transition.opacity (Fade)

Apenas a opacidade muda
x-transition.opacity faz fade in/out suave

3. x-transition.scale (Zoom)

Zoom in/out!
x-transition.scale faz o elemento crescer/encolher

4. x-transition com Duração Customizada

Transição de 1 segundo
Transição de 200ms
Use x-transition.duration.Xms para customizar velocidade

5. x-transition:enter e x-transition:leave

Transição enter/leave customizada!
enter: ao aparecer | leave: ao desaparecer
start: estado inicial | end: estado final

6. Transições em Múltiplos Elementos

Use transition-delay para efeito em cascata

7. Notificação com Transição

✅ Ação realizada com sucesso!
Notificações com entrada/saída suaves melhoram UX

8. Modal com Transição

Modal com Transição

Este modal aparece com uma animação suave.

Combine transições no overlay e no conteúdo para efeito melhor

9. Modificadores x-transition (Referência Rápida)

Modificador Efeito
x-transition Transição padrão (fade)
.opacity Apenas fade (opacidade)
.scale Zoom in/out
.duration.Xms Define duração em ms
:enter Customiza entrada
:leave Customiza saída