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

【问题标题】：How to play a CSS animation on every page transition with Next.js?如何使用 Next.js 在每个页面转换上播放 CSS 动画？
【发布时间】：2022-02-02 00:48:00
【问题描述】：

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

【问题讨论】：

请提供足够的代码，以便其他人更好地理解或重现问题。

标签： javascript reactjs next.js css-animations

【解决方案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>
    )
}

【讨论】：