zhangxiang
8f4a860180
动效合规专项（Task #16）收尾。
改动：
- page-transition.tsx：入场 duration 0.4/0.5 → 0.3（末处真 P1，由 client-layout 消费）
- 17 文件 21 处子元素 stagger 步进 80/100ms → 60ms
（CONTEXT.md 原则4「子元素 stagger 30-60ms」；属已批准决策 04e91e3 的漏网，
因当时审计脚本看不见 delay: i * N 的乘法写法）
- 审计脚本补盲区：新增变量递增 stagger 识别 + 明细表（此前漏掉全站 33 处）
- 审计脚本新增 NON_ENTRANCE 排除：flip-clock 机械翻转、design-system 死代码令牌
- delay 判据自我纠正：硬禁令约束的是 duration（动效时长），
delay 属调度而非动效本身，一律判 P2（偏离指引），不得判 P0
门禁（全绿）：
- tsc 0 error
- eslint 0 error（50 warnings 均为既有）
- jest 130/130 套件，1573 通过 / 2 跳过 / 0 失败
- 运行时冒烟 16/16 PASS（8 路由 × 浅深双版，0 控制台报错）
- 审计：P0=0 · P1=0 · stagger 步进 P2=0
121 lines
2.5 KiB
TypeScript
121 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { usePathname } from 'next/navigation';
|
|
import { useEffect, useState } from 'react';
|
|
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
|
|
|
const pageVariants = {
|
|
initial: {
|
|
opacity: 0,
|
|
y: 8,
|
|
scale: 0.98,
|
|
},
|
|
animate: {
|
|
opacity: 1,
|
|
y: 0,
|
|
scale: 1,
|
|
transition: {
|
|
duration: 0.3,
|
|
ease: [0.25, 1, 0.5, 1] as const,
|
|
staggerChildren: 0.05,
|
|
},
|
|
},
|
|
exit: {
|
|
opacity: 0,
|
|
y: -8,
|
|
scale: 0.98,
|
|
transition: {
|
|
duration: 0.2,
|
|
ease: [0.22, 1, 0.36, 1] as const,
|
|
},
|
|
},
|
|
};
|
|
|
|
export function PageTransition({ children }: { children: React.ReactNode }) {
|
|
const pathname = usePathname();
|
|
const shouldReduceMotion = useReducedMotion();
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
// SSR 和首次 hydration 阶段直接渲染子内容，避免 framer-motion DOM 差异导致 hydration mismatch
|
|
if (!mounted || shouldReduceMotion) {
|
|
return <>{children}</>;
|
|
}
|
|
|
|
return (
|
|
<AnimatePresence mode="wait" initial={false}>
|
|
<motion.div
|
|
key={pathname}
|
|
variants={pageVariants}
|
|
initial="initial"
|
|
animate="animate"
|
|
exit="exit"
|
|
style={{
|
|
willChange: 'transform, opacity',
|
|
backfaceVisibility: 'hidden',
|
|
}}
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
</AnimatePresence>
|
|
);
|
|
}
|
|
|
|
const sectionVariants = {
|
|
hidden: { opacity: 0, y: 20 },
|
|
visible: (i: number) => ({
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: {
|
|
delay: i * 0.06,
|
|
duration: 0.3,
|
|
ease: [0.25, 1, 0.5, 1] as const,
|
|
},
|
|
}),
|
|
};
|
|
|
|
export function StaggerChildren({
|
|
children,
|
|
className = '',
|
|
staggerCount = 4
|
|
}: {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
staggerCount?: number;
|
|
}) {
|
|
const shouldReduceMotion = useReducedMotion();
|
|
|
|
if (shouldReduceMotion) {
|
|
return <div className={className}>{children}</div>;
|
|
}
|
|
|
|
return (
|
|
<motion.div
|
|
className={className}
|
|
initial="hidden"
|
|
animate="visible"
|
|
variants={{
|
|
visible: {
|
|
transition: {
|
|
staggerChildren: 0.06,
|
|
delayChildren: 0.05,
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
{Array.isArray(children)
|
|
? children.map((child, i) => (
|
|
<motion.div key={i} custom={Math.min(i, staggerCount)} variants={sectionVariants}>
|
|
{child}
|
|
</motion.div>
|
|
))
|
|
: children
|
|
}
|
|
</motion.div>
|
|
);
|
|
}
|