怎样在React中结合CSS Modules实现路由过渡？-css教程-PHP中文网

CSS Modules 动画失效因类名哈希化且需静态声明，动态拼接如 styles[page-${status}] 不被支持；须在.module.css中显式定义.page-enter等四类并用:export导出，JS中传classNames={styles}给CSSTransition。

怎样在react中结合css modules实现路由过渡？

为什么直接用 `react-router` 的 `useLocation` + CSS Modules 动画会失效？

因为 CSS Modules 生成的类名是哈希化的，而动画依赖的类名（如 enter、exit）必须在 DOM 元素上真实存在并被 CSS 规则捕获。如果你写 className={styles.enter} 却没在 CSS 文件里定义 .enter，或者用了动态拼接（如 styles[`${type}Active`]）但未导出对应 key，动画就根本不会触发。

关键点：CSS Modules 的类名必须静态可分析，且动画状态类需显式声明、不依赖运行时拼接。

确保你的 .module.css 文件中明确定义了 .page-enter、.page-enter-active、.page-exit、.page-exit-active 四个类（命名可自定，但必须成对）
不要在 JS 中用字符串拼接类名去调用 styles 对象，比如避免 styles[`page-${status}`] —— Webpack 不会把这种动态引用纳入 CSS Modules 作用域
useLocation 返回的 location.key 是唯一标识，可用于判断是否需要触发动画，但不能直接当类名用

如何用 `useTransition`（React Router v6.4+）配合 CSS Modules 写路由过渡？

useTransition 是目前最轻量、最可控的方式：它返回一个 isPending 状态，能精准反映导航是否正在进行中，配合 CSS Modules 的条件类名即可驱动入场/离场样式。

注意：它不自动添加类名，你需要手动控制 className 的切换逻辑。

在路由组件顶层用 const transition = useTransition();
用 transition.isPending 判断当前是否处于导航中（例如从 /a → /b），此时可给容器加 styles.page-transitioning

CSS 文件中定义：

.page-transitioning { opacity: 0.99; /* 强制触发重排，让 transition 生效 */ }

真正动画靠的是 useLocation 和 key 变化触发的组件卸载/挂载，所以必须给或路由组件加 key={location.key}

`CSSTransition`（`react-transition-group`）和 CSS Modules 怎么配？

这是兼容性最强的方案，尤其适合需要精细控制 enter/exit 时长、延迟或钩子的场景。但它和 CSS Modules 配合时，容易卡在「类名传不进去」这一步。

Reactivation Specialist · 流失召回

适用于用户提出以下需求时：“构建赢回活动（win-back campaign）”、“重新激活已流失订阅者（re-engage lapsed subscribers）”、“执行重新授权 / 重新同意（re-permission / re-consent）清理”或“清理无效联系人列表（sunset my dead list）”；输出一个闭环式再激活方案——包括：流失用户群组（lapsed-cohort）定义、分阶段优惠阶梯（staged offer ladder）、重新授权（re-consent / re-p

下载

核心是：把 CSS Modules 导出的类名对象完整传给 classNames 属性，而不是只传字符串。

安装：npm install react-transition-group

CSS 文件中写好四类规则（如 .page-enter、.page-enter-active 等），并用 export 暴露：

:export { enter: page-enter; enterActive: page-enter-active; exit: page-exit; exitActive: page-exit-active; }

JS 中导入：import styles from './Page.module.css';，然后传给
必须包裹在中，且每个子元素要有唯一 key（推荐用 location.key）

常见错误：动画只播一次、切换卡顿、样式不生效

这些基本都源于 DOM 生命周期和 CSS 触发时机没对齐。CSS Modules 本身不干预渲染流程，但它的局部化机制会让开发者误以为“写了类名就一定生效”。

动画只播一次？检查是否漏了 timeout 属性 —— CSSTransition 默认不设超时，会一直等 CSS 动画结束，但若样式没定义 transition 或写错选择器，就永远卡住
切换卡顿？确认没有在 enter-active 类里写 display: none —— 这会导致浏览器跳过动画帧；改用 opacity: 0 + transform: translateX(20px) 更稳妥
样式不生效？打开 DevTools 查看元素实际 class 名，对比 CSS 文件中 :export 的 key 名和 JS 中 styles.xxx 的引用是否完全一致（大小写、连字符都不能错）
服务端渲染（SSR）下动画异常？useTransition 在 SSR 中不可用，此时应降级为无动画，或用 useEffect + location.key 做客户端专属控制