Animaciones de layout y AnimatePresence
Anime automáticamente los cambios de layout con la prop layout y gestione el montaje y desmontaje con AnimatePresence.
Animaciones de layout y AnimatePresence es una lección gratuita de React Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.
Animaciones de layout
Añada la prop layout a un componente motion y Framer Motion animará automáticamente cualquier cambio de layout (tamaño o posición) causado por el estado o por mutaciones del DOM; no es necesario ajustar posiciones manualmente.
<motion.div layout style={{ width: isExpanded ? 300 : 150 }}>
{/* Width animates smoothly when isExpanded changes */}
</motion.div>Valores de la prop layout
La prop layout acepta true (todo el layout), 'position' (solo la posición) o 'size' (solo el tamaño) para limitar qué se anima.
<motion.div layout="position"> {/* only x/y positions animate */}
<motion.div layout="size"> {/* only width/height animate */}layoutId para transiciones de elementos compartidos
Asigne el mismo layoutId a dos elementos y Framer Motion los animará como si fueran el mismo elemento, incluso si pertenecen a 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 las animaciones de exit. Sin él, los componentes que se desmontan desaparecen al instante. Envuelva con él un renderizado condicional para animar los desmontajes.
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>La prop key es obligatoria
AnimatePresence necesita que cada hijo tenga una key estable. Sin una key única, React no puede detectar cuándo se desmontan los elementos y cuándo se actualizan.
// Animating between pages:
<AnimatePresence mode="wait">
<motion.div key={pathname} ... />
</AnimatePresence>Modo de AnimatePresence
mode controla cómo se superponen los elementos salientes y entrantes. 'wait' retrasa la animación de entrada hasta que termina la salida. 'sync' (predeterminado) ejecuta ambas simultáneamente.
// 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>Animar listas con layout
Combine layout y AnimatePresence para animar el reordenamiento y la eliminación de elementos de una 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 coordina las animaciones de layout de varios componentes motion independientes para que se animen juntos como un único grupo.
import { LayoutGroup } from 'framer-motion';
<LayoutGroup>
<Sidebar />
<MainContent />
{/* Both animate layout changes together */}
</LayoutGroup>Corregir la distorsión del layout
Las animaciones de layout pueden distorsionar los bordes, las sombras y el border-radius. Utilice la prop layoutDependency o la corrección de escala mediante CSS para solucionar los defectos visuales.
<motion.div
layout
style={{ borderRadius: 12 }}
// Framer Motion auto-corrects border-radius during scale changes
/>Patrón de transición en un eje compartido
Para pasos de un asistente o pestañas, anime la posición X según la dirección para crear una relación espacial significativa entre las pantallas.
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>Comprobación rápida
¿Qué modo de AnimatePresence retrasa la animación de entrada hasta que termina la animación de salida?
Resumen
layout anima automáticamente los cambios de tamaño y posición. layoutId transforma un elemento en otro entre dos puntos del árbol. AnimatePresence habilita las animaciones de salida; proporcione siempre props key estables a los hijos y elija mode='wait' para las transiciones entre páginas.
Preguntas frecuentes
¿La lección «Animaciones de layout y AnimatePresence» es gratis?
Sí — el texto completo de «Animaciones de layout y AnimatePresence» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Animaciones de layout y AnimatePresence»?
Anime automáticamente los cambios de layout con la prop layout y gestione el montaje y desmontaje con AnimatePresence. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar React Academy?
No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Animaciones de layout y AnimatePresence»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de React Academy?
Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Componentes Motion y animaciones básicas
- Variants para animaciones orquestadas
- Animaciones de gestos: hover, tap y drag
- Animaciones de layout y AnimatePresence