Next.js 实战 (五)：添加路由 Transition 过渡效果和 Loading 动画

什么是 Framer Motion

Framer Motion 是一个专门为 React 设计的、功能强大且易于使用的动画库。它允许开发者轻松地为他们的应用添加流畅的交互和动画效果，而不需要深入理解复杂的动画原理。Framer Motion 提供了声明式的 API 来处理动画、手势以及页面转换，非常适合用来创建响应式用户界面。

首屏加载动画

如果你使用 next.js 构建单页面应用程序，页面一开始资源加载会导致页面空白，一般我们的做法都是在首屏添加加载动画，等资源加载完成再把动画取消。

1. 新建 components/FullLoading/index.tsx 文件：

'use client';

import {
    useEffect, useState } from 'react';

const FullLoading = () => {
   
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
   
    setMounted(true);
  }, []);

  // 判断组件是否挂载
  if (!mounted) {
   
    return (
      <div className="fixed flex w-screen h-screen justify-center items-center flex-col z-[99] overflow-hidden bg-white dark:bg-slate-900">
        <div className="relative w-12 h-12 rotate-[165deg] before:content-[''] after:content-[''] before:absolute after:absolute before:top-2/4 after:top-2/4 before:left-2/4 after:left-2/4 before:block after:block before:w-[.5em] after:w-[.5em] before:h-[.5em] after:h-[.5em] before:rounded after:rounded before:-translate-x-1/2 after:-translate-x-1/2 before:-translate-y-2/4 after:-translate-y-2/4 before:animate-[loaderBefore_2s_infinite] after:animate-[loaderAfter_2s_infinite]"></div>
      </div>
    );
  }
  return null;
};
export default FullLoading;

2. app/globals.scss 中加入代码：

@keyframes loaderBefore {
   
  0% {
   
   width: 0.5em;
   box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
  }
 
  35% {
   
   width: 2.5em;
   box-shadow: 0 -0.5em rgba(225, 20, 98