Animações de layout e AnimatePresence
Anime alterações de layout automaticamente com a propriedade layout e monte/desmonte componentes com AnimatePresence.
Animações de layout e AnimatePresence é uma aula grátis de React Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.
Animações de layout
Adicione a propriedade layout a um componente de movimento, e o Framer Motion animará automaticamente quaisquer alterações de layout (tamanho, posição) causadas pelo estado ou por mutações no DOM — não é necessário posicionamento manual.
<motion.div layout style={{ width: isExpanded ? 300 : 150 }}>
{/* Width animates smoothly when isExpanded changes */}
</motion.div>Valores da propriedade de layout
A propriedade layout aceita true (todo o layout), 'position' (somente a posição) ou 'size' (somente o tamanho) para limitar o que será animado.
<motion.div layout="position"> {/* only x/y positions animate */}
<motion.div layout="size"> {/* only width/height animate */}layoutId para transições de elementos compartilhados
Dê a dois elementos o mesmo layoutId, e o Framer Motion animará a transição entre eles como se fossem o mesmo elemento, mesmo em componentes diferentes.
// Thumbnail in list:
<motion.img layoutId={`photo-${id}`} src={src} className="thumbnail" />
// Full-screen view:
<motion.img layoutId={`photo-${id}`} src={src} className="fullscreen" />
// Framer Motion morphs one into the other automaticallyAnimatePresence
AnimatePresence habilita animações de exit. Sem ele, os componentes desmontados desaparecem instantaneamente. Envolva uma renderização condicional com ele para animar desmontagens.
import { AnimatePresence, motion } from 'framer-motion';
<AnimatePresence>
{isVisible && (
<motion.div
key="notification"
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }}
/>
)}
</AnimatePresence>A propriedade key é obrigatória
O AnimatePresence precisa que cada filho tenha uma key estável. Sem uma chave exclusiva, o React não consegue detectar quando os elementos são desmontados em vez de atualizados.
// Animating between pages:
<AnimatePresence mode="wait">
<motion.div key={pathname} ... />
</AnimatePresence>Modo do AnimatePresence
mode controla como os elementos que saem e os que entram se sobrepõem. 'wait' atrasa a animação de entrada até que a saída seja concluída. 'sync' (padrão) executa ambas simultaneamente.
// Page transitions — wait for old page to exit:
<AnimatePresence mode="wait">
<motion.main key={pathname} ... />
</AnimatePresence>
// Toast stack — new toasts appear while old ones exit:
<AnimatePresence mode="sync">
{toasts.map(t => <motion.div key={t.id} ... />)}
</AnimatePresence>Animando listas com layout
Combine layout e AnimatePresence para animar a reordenação e a remoção de itens de uma lista.
<motion.ul>
<AnimatePresence>
{items.map(item => (
<motion.li
key={item.id}
layout
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: 'auto' }}
exit={{ opacity: 0, height: 0 }}
>
{item.name}
</motion.li>
))}
</AnimatePresence>
</motion.ul>LayoutGroup
LayoutGroup coordena animações de layout em vários componentes de movimento independentes, fazendo com que sejam animados juntos como um único grupo.
import { LayoutGroup } from 'framer-motion';
<LayoutGroup>
<Sidebar />
<MainContent />
{/* Both animate layout changes together */}
</LayoutGroup>Corrigindo distorções de layout
As animações de layout podem distorcer bordas, sombras e o raio da borda. Use a propriedade layoutDependency ou a correção de escala do CSS para corrigir artefatos visuais.
<motion.div
layout
style={{ borderRadius: 12 }}
// Framer Motion auto-corrects border-radius during scale changes
/>Padrão de transição em eixo compartilhado
Para etapas de assistentes ou abas, anime a posição X com base na direção para criar uma relação espacial significativa entre as telas.
const variants = {
enter: (dir: number) => ({ x: dir > 0 ? '100%' : '-100%', opacity: 0 }),
center: { x: 0, opacity: 1 },
exit: (dir: number) => ({ x: dir < 0 ? '100%' : '-100%', opacity: 0 }),
};
<AnimatePresence custom={direction} mode="wait">
<motion.div
key={step}
custom={direction}
variants={variants}
initial="enter"
animate="center"
exit="exit"
/>
</AnimatePresence>Verificação rápida
Qual modo de AnimatePresence adia a animação de entrada até que a animação de saída seja concluída?
Resumo
layout anima automaticamente as alterações de tamanho/posição. layoutId transforma um elemento em outro entre dois elementos na árvore. AnimatePresence habilita animações de saída — sempre forneça propriedades key estáveis aos filhos e escolha mode='wait' para transições de página.
Perguntas Frequentes
A aula “Animações de layout e AnimatePresence” é grátis?
Sim — o texto completo de “Animações de layout e AnimatePresence” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.
O que vou aprender em “Animações de layout e AnimatePresence”?
Anime alterações de layout automaticamente com a propriedade layout e monte/desmonte componentes com AnimatePresence. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar React Academy?
Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Animações de layout e AnimatePresence”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de React Academy?
Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Componentes de movimento e animações básicas
- Variantes para animações orquestradas
- Animações de gestos: passar o cursor, tocar e arrastar
- Animações de layout e AnimatePresence