如何在使用 Next.js 的每个页面转换中播放 CSS 动画？

Question

我正在使用 Next.js 生成静态网站。我创建了一个 CSS 动画，它在创建特定 div 时全屏播放。我将 div 放在我的 _app.tsx 中，以便在大多数页面转换期间可以播放动画，因为许多 HTML 元素，包括 div，获取在这些过渡期间被破坏和创造。但是，当您从一个页面移动到具有几乎相同 HTML 结构的页面（例如博客文章）时，它不会播放，可能是因为 div 没有被销毁和重新创建。有没有办法在每次页面转换时播放 CSS 动画？例如，当它不是 removed/regenerated 时，我可以检测到页面转换和 remove/regenerate 和 div 吗？

Answer 1

想了想自己想出来的

.animation[animate="0"] {
    animation: none;
}
.animation[animate="1"] {
    animation: /* ... */;
}

然后

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>
    )
}

如何在使用 Next.js 的每个页面转换中播放 CSS 动画？

How to play a CSS animation on every page transition with Next.js?

javascript

css-animations

reactjs

next.js