Estoy usando Next.js para generar un sitio web estático. Creé una animación CSS que se reproduce en pantalla completa cuando se crea un div específico. Puse el div en mi _app.tsx, de modo que durante la mayoría de las transiciones de página se pueda reproducir la animación, porque muchos de los elementos HTML, incluido el div, se destruyen y crean durante estas transiciones. Sin embargo, no se reproducirá cuando pase de una página a otra con casi la misma estructura HTML (como artículos de blog), probablemente porque el div no se destruye ni se vuelve a crear. ¿Hay alguna forma de reproducir una animación CSS en cada transición de página? Por ejemplo, ¿puedo detectar la transición de página y eliminar/regenerar el div cuando no se eliminará/regenerará?
Lo descubrí por mi cuenta después de pensarlo por un tiempo.
.animation[animate="0"] { animation: none; } .animation[animate="1"] { animation: /* ... */; }después
import Router from "next/router" export const Animations = () => { const [i,setI] = useState(1) Router.events.on('routeChangeComplete', () => setI(1)) Router.events.on('routeChangeStart', () => setI(0)) return ( <div className="animation" animate={i}></div> ) }