Tengo el siguiente componente de navegación React fly out usando el movimiento del enmarcador. Este componente se usa varias veces para cada elemento de navegación.
¿Hay alguna otra forma de activar esta animación sin representación condicional (SEO)? El uso de la key no funcionará, ya que necesito que esté oculto de forma predeterminada y solo visible cuando isActive es igual a verdadero.
<AnimatePresence initial={false}> {isActive && ( <FlyOutWrapper exit={{ opacity: 0 }} transition={{ duration: 0.2 }}> <FlyOutContent initial={{ x: "5rem", opacity: 0, }} animate={{ x: 0, opacity: 1, }} transition={{ duration: 0.3 }}> <Content>{title}</Content> </FlyOutContent> <FlyOutBackground initial={{ y: "-100%" }} animate={{ y: 0 }} transition={{ duration: 0.3 }} /> </FlyOutWrapper> )} </AnimatePresence>Si no desea que abandone el DOM, no necesita usar AnimatePresence en absoluto. En su lugar, puede animar la posición (y la opacidad, etc.) en función de su estado isActive . Puede hacer esto con variants o simplemente cambiando entre las propiedades directamente.
Ejemplo (sin variantes):
<FlyOutBackground initial={{ y: "-100%" }} animate={{ y: isActive ? 0 : "-100%" }} transition={{ duration: 0.3 }} />Ejemplo usando variantes:
const bgVariants = { visible: { y: 0 }, hidden: { y: "-100%" } } <FlyOutBackground variants={bgVariants} initial="hidden" animate={isActive ? "visible" : "hidden"} transition={{ duration: 0.3 }} />