I'm using Next.js to generate a static website. I have created a CSS animation that plays in full screen when a specific div is created. I put the div in my _app.tsx, so that during most of the page transitions the animation can be played, because many of the HTML elements, including the div, gets destroyed and created during these transitions. However, it won't play when you move from a page to one with almost the same HTML structure (such as blog articles), probably because the div doesn't get destroyed and recreated. Is there a way to play a CSS animation on every page transition? For example, can I detect page transition and remove/regenerate the div when it won't be removed/regenerated?
I figured it out by myself after thinking about it for a while.
.animation[animate="0"] {
animation: none;
}
.animation[animate="1"] {
animation: /* ... */;
}
then
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>
)
}