每当在 next.js 中更改路线时，如何添加过渡动画？答案

【问题标题】：How to add transistion animation whenever the route is changed in next.js?每当在 next.js 中更改路线时，如何添加过渡动画？
【发布时间】：2021-03-05 22:18:00
【问题描述】：

我在主页上有 2 个链接。我需要为每个链接使用不同的过渡动画。

即如果我单击左侧的链接按钮。随着路线的变化，过渡应该从左到右开始。

【问题讨论】：

标签： css reactjs animation next.js

【解决方案1】：

您可以使用framer-motion 并包装页面组件的链接布局。

即

   import { motion } from 'framer-motion';

   <motion.div initial="exit" animate="enter" exit="exit">
      <motion.div variants={variants}>
        <Layout>
          ...
        </Layout>
      </motion.div>
    </motion.div>

这将使着陆页动画化。

【讨论】：

【解决方案2】：

简而言之，不要使用 Next.js 的原生 <Link> 标签，而是使用带有自定义事件处理程序的常规 <a> 来导航您的页面。事件处理程序应将适当的 CSS 类应用于页面组件以触发动画并在动画完成后重定向。由于您使用的是 Next.js，别忘了手动预取您的路线！

从一个简单的<a>标签开始：

<a onClick={redirectToPageB}>Go to page B</a>`

使用向页面容器添加 CSS 类并在 1 秒超时后更改路由的函数来处理它：

const router = useRouter();

function redirectToPageB() {
  document.querySelector('#container').classList.add(styles.transitionRight);
  setTimeout(() => {
    router.push('/page-b');
  }, 1000);
}

最后，通过预取/page-b 路由进行优化：

useEffect(() => {
  router.prefetch('/page-b');
}, []);

【讨论】：

您的解决方案很有意义。谢谢