Reactjs 如何在NextJS中仅在刷新页面和页面淡出页面过渡时添加全屏加载器

发布于12月17日

我想添加一个全屏加载器到我的Next.JS应用程序，只有在刷新页面或第一次加载它时才会出现.在不同页面之间进行路由时，它不应出现.另外，我想在页面之间导航时添加fade个过渡，就像这里的https://www.vidstack.io/个.我如何在Next.JS中做到这一点？下面是我想要实现的全屏加载的示例(https://stackblitz.com/edit/stackblitz-starters-vj4saw?file=app%2Flayout.tsx).也许framer-motion也可以吗？

推荐答案

您可以使用Reaction的framer-motion库来制作过渡效果.下面是一个简单的例子:

import { motion } from "framer-motion";

export default function PageTransition({ children }) {
  return (
    <motion.main
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 1 }} // Adjust the duration as needed
    >
      {children}
    </motion.main>
  );
}

用途:

"use client"
import PageTransition from "@/components/PageTransition";
import React from 'react'

export default function SimplePage() {
  return (
    <>
      <PageTransition>
        <main className="text-center uppercase">
          <p>
            Text.
          </p>
        </main>
      </PageTransition>
    </>
  )
}