在 Next.js 中如何实现页面切换动画

前言

Next.js 是一款基于 React 的服务端渲染框架，它提供了很多便利的功能，比如自动代码拆分、静态页面生成、热更新等等。但是在默认情况下，Next.js 并没有提供任何页面切换动画，这对于用户体验来说可能会有所影响。在本文中，我们将介绍如何在 Next.js 中实现页面切换动画。

实现思路

要实现页面切换动画，我们需要修改 Next.js 的默认行为。在默认情况下，Next.js 是通过切换 HTML 的内容来实现页面切换的。我们需要将这个行为改为切换组件，然后再通过 CSS 动画来实现页面切换的效果。

实现步骤

1. 安装相关依赖

我们需要安装以下依赖：

• framer-motion：用于实现页面切换的动画效果。
• next-page-transitions：一个 Next.js 插件，用于简化页面切换动画的实现。

npm install framer-motion next-page-transitions

2. 创建页面切换组件

我们需要创建一个组件，用于在页面切换时显示动画效果。这个组件需要接收两个参数：children 和 animation。children 表示当前页面的内容，animation 表示当前页面切换的动画效果。

import { motion } from "framer-motion";

export default function PageTransition({ children, animation }) {
  return (
    <motion.div
      initial="initial"
      animate="animate"
      exit="exit"
      variants={animation}
    >
      {children}
    </motion.div>
  );
}

3. 创建页面切换动画

我们需要为每个页面创建一个动画效果，这个动画效果需要包含三个阶段：initial、animate 和 exit。initial 表示页面进入时的初始状态，animate 表示页面进入时的动画效果，exit 表示页面离开时的动画效果。

export const fadeIn = {
  initial: {
    opacity: 0,
  },
  animate: {
    opacity: 1,
    transition: {
      duration: 0.5,
    },
  },
  exit: {
    opacity: 0,
    transition: {
      duration: 0.5,
    },
  },
};

export const scaleIn = {
  initial: {
    opacity: 0,
    scale: 0.8,
  },
  animate: {
    opacity: 1,
    scale: 1,
    transition: {
      duration: 0.5,
    },
  },
  exit: {
    opacity: 0,
    scale: 0.8,
    transition: {
      duration: 0.5,
    },
  },
};

4. 使用页面切换组件

我们需要在每个页面中使用 PageTransition 组件，并传入对应的动画效果。

import PageTransition, { fadeIn } from "../components/PageTransition";

export default function Home() {
  return (
    <PageTransition animation={fadeIn}>
      <div className="container">
        <h1>Home</h1>
      </div>
    </PageTransition>
  );
}

5. 注册页面切换插件

我们需要在 _app.js 文件中注册 next-page-transitions 插件，以便在页面切换时自动使用我们创建的动画效果。

import { AnimatePresence } from "framer-motion";
import { PageTransition } from "next-page-transitions";

function MyApp({ Component, pageProps, router }) {
  return (
    <AnimatePresence exitBeforeEnter>
      <PageTransition
        timeout={500}
        classNames="page-transition"
        loadingClassNames="loading-indicator"
        loadingComponent={<div>Loading...</div>}
        loadingDelay={500}
        loadingTimeout={{
          enter: 500,
          exit: 0,
        }}
        slideProps={{
          direction: "down",
        }}
        monkeyPatchScrolling
      >
        <Component {...pageProps} key={router.route} />
      </PageTransition>
    </AnimatePresence>
  );
}

export default MyApp;

示例代码

完整代码请查看 GitHub。

总结

通过以上步骤，我们就可以在 Next.js 中实现页面切换动画了。这样可以提升用户体验，使页面切换更加平滑自然。同时，这个实现方法也可以应用于其他基于 React 的框架，如 Gatsby、Create React App 等。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c2cb93add4f0e0ffc9f14c