ext.js 实战 (五)：添加路由 Transition 过渡效果和 Loading 动画
ext.js 实战 (五)：添加路由 Transition 过渡效果和 Loading 动画
什么是 Framer MotionFramer Motion 是一个专门为 React 设计的、功能强大且易于使用的动画库。它允许开发者轻松地为他们的应用添加流畅的交互和动画效果，而不需要深入理解复杂的动画原理。Framer Motion 提供了声明式的 API 来处理动画、手势以及页面转换，非常适合用
ext.js 实战 (五)：添加路由 Transition 过渡效果和 Loading 动画
Framer Motion 是一个专门为 React 设计的、功能强大且易于使用的动画库。它允许开发者轻松地为他们的应用添加流畅的交互和动画效果，而不需要深入理解复杂的动画原理。Framer Motion 提供了声明式的 API 来处理动画、手势以及页面转换，非常适合用来创建响应式用户界面。
如果你使用 next.js 构建单页面应用程序，页面一开始资源加载会导致页面空白，一般我们的做法都是在首屏添加加载动画，等资源加载完成再把动画取消。
1、 新建 components/FullLoading/ 文件：
'use client';
import { useEffect, useState } from 'react';
ct FullLoading = () => {
ct [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
// 判断组件是否挂载
if (!mounted) {
return (
<div classame="fixed flex w-screen h-screen justify-center items-center flex-col z-[99] overflow-hidden bg-white dark:bg-slate-900">
<div classame="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);
}
5% {
width: 2.5em;
box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
}
70% {
width: 0.5em;
box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
}
100% {
box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
}
}
@keyframes loaderAfter {
0% {
height: 0.5em;
box-shadow: 0.5em 1em rgba(61, 184, 14, 0.75), -0.5em -1em rgba(2, 169, 2, 0.75);
}
5% {
height: 2.5em;
box-shadow: 0.5em 0 rgba(61, 184, 14, 0.75), -0.5em 0 rgba(2, 169, 2, 0.75);
}
70% {
height: 0.5em;
box-shadow: 0.5em -1em rgba(61, 184, 14, 0.75), -0.5em 1em rgba(2, 169, 2, 0.75);
}
100% {
box-shadow: 0.5em 1em rgba(61, 184, 14, 0.75), -0.5em -1em rgba(2, 169, 2, 0.75);
}
}、 中引用组件：
export default async function RootLayout({
children,
}: Readonly<{
children: React.Reactode;
}>) {
return (
<html suppressHydrationWarning>
<body>
<extUIProvider>
<ThemeProvider attribute="class" defaultTheme="light">
{/* 全局 Loading */}
<FullLoading />
{children}
</ThemeProvider>
</extUIProvider>
</body>
</html>
);
}实际效果可参考网站：今日热榜
next.js 提供了现成的方案，官方文档参考：loading.js
新建 app/ 文件：
import { Spinner } from '@nextui-org/react';
export default function Loading() {
return (
<div classame="flex justify-center items-center min-h-60">
<Spinner label="页面正在加载中..." />
</div>
);
}1、 新建 app/ 文件：
"use client";
import { motion } from "framer-motion";
export default function Template({ children }: { children: React.Reactode }) {
ct variants = {
hidden: { opacity: 0, x: 100 },
enter: { opacity: 1, x: 0 },
};
return (
<
data-scroll
classame="mb-auto p-4"
initial="hidden"
animate="enter"
variants={variants}
transition={{ duration: 0.5, ease: 'easeOut' }}
>
{children}
</>
);
}1、 新建 components/PageAnimatePresence/ 文件
"use client";
import { AnimatePresence, motion } from "framer-motion";
import { LayoutRouterContext } from "next/dist/shared/lib/app-router-context.shared-runtime";
import { usePathname } from "next/navigation";
import { useContext, useRef } from "react";
// 阻止页面立即打开，先让退场动画走完，再显示新的页面内容
function FrozenRouter(props: { children: React.Reactode }) {
ct context = useContext(LayoutRouterContext ?? {});
ct frozen = useRef(context).current;
return (
<LayoutRouterContext.Provider value={frozen}>
{}
</LayoutRouterContext.Provider>
);
}
ct PageAnimatePresence = ({ children }: { children: React.Reactode }) => {
ct pathname = usePathname();
return (
<AnimatePresence mode="wait">
<motion.div
key={pathname}
initial="initialState"
animate="animateState"
exit="exitState"
transition={{
duration: 0.5,
ease: 'easeOut'
}}
variants={{
exitState: { opacity: 0, x: 100 }
}}
classame="w-full min-h-screen"
>
<FrozenRouter>{children}</FrozenRouter>
</motion.div>
</AnimatePresence>
);
};
export default PageAnimatePresence;2、 文件中引入组件包裹 children:
import PageAnimatePresence from '@/components/PageAnimatePresence'
export default async function RootLayout({
children,
}: Readonly<{
children: React.Reactode;
}>) {
return (
<html suppressHydrationWarning>
<body>
<extUIProvider>
<ThemeProvider attribute="class" defaultTheme="light">
{/* 全局 Loading */}
<FullLoading />
<PageAnimatePresence>
{children}
</PageAnimatePresence>
</ThemeProvider>
</extUIProvider>
</body>
</html>
);
}大家如果有更好的实现方案，可以一起探讨一下。
本文部分效果参考了文章：ext.js 如何实现导航时的过渡动画？（使用 Framer Motion）
#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格
上传时间： 2025-07-24 17:19:18
推荐阅读
| 留言与评论（共有 12 条评论） |
| 本站网友 黄河科技学院附属医院 | 23分钟前 发表 |
| x | |
| 本站网友 ccav | 22分钟前 发表 |
| 0.5em 0 rgba(61 | |
| 本站网友 大白兔奶糖的热量 | 6分钟前 发表 |
| block before | |
| 本站网友 临沂早教中心 | 25分钟前 发表 |
| 2 | |
| 本站网友 impress | 3分钟前 发表 |
| 0.75); } 5% { height | |
| 本站网友 波兰人口 | 14分钟前 发表 |
| 功能强大且易于使用的动画库 | |
| 本站网友 linux解压rar | 11分钟前 发表 |
| 而不需要深入理解复杂的动画原理 | |
| 本站网友 js正则 | 22分钟前 发表 |
| -0.5em 1em rgba(2 | |
| 本站网友 安卓应用软件开发 | 0秒前 发表 |
| React.Reactode }) { ct variants = { hidden | |
| 本站网友 治疗阳 | 25分钟前 发表 |
| { opacity | |
| 本站网友 重庆福彩中心 | 0秒前 发表 |
| React.Reactode }) { ct variants = { hidden | |