Revert "feat(ui): add CSS stagger entrance animation for page content sections"

This reverts commit a67fdf2.

Author: Aparencia

client/src/features/dashboard/components/views/TodayView.tsx

@@ -10,6 +10,7 @@ import { useNavigate } from 'react-router-dom';
 import { motion } from 'framer-motion';
 import { Timer, FileText, Layers, Lightbulb } from 'lucide-react';
 import { cn } from '@/lib/utils';
+import { SPRING, fadeInUp } from '@/lib/animation/springConfig';
 import { useReducedMotion } from '@/hooks/useReducedMotion';
 import ModuleRitualHeader from '@/components/ui/ModuleRitualHeader';
 import { DashboardCard } from '../DashboardCard';
@@ -25,6 +26,16 @@ const accentText: Record<string, string> = {
   flashcard: 'text-flashcard', feynman: 'text-feynman',
 };
 
+const staggerContainer = {
+  hidden: {},
+  visible: { transition: { staggerChildren: 0.08, delayChildren: 0.1 } },
+};
+
+const heroStatVariant = {
+  hidden: { opacity: 0, y: 20, scale: 0.95 },
+  visible: { opacity: 1, y: 0, scale: 1, transition: SPRING.gentle },
+};
+
 const quickActions = [
   { label: '专注', icon: Timer, path: '/pomodoro', accent: 'pomodoro' as const },
   { label: '笔记', icon: FileText, path: '/notes', accent: 'note' as const },
@@ -65,10 +76,12 @@ export function TodayView({
   ];
 
   return (
-    <div className="stagger-fade-in">
+    <div>
       {/* ════ 今日航线：行动导向主角 ════ */}
       <section className="relative max-w-[1100px] mx-auto px-6 pt-rhythm-md">
-        <PlannerPanel />
+        <motion.div {...fadeInUp}>
+          <PlannerPanel />
+        </motion.div>
       </section>
 
       {/* ════ 今日待办：未完成显性化（蔡格尼克效应） ════ */}
@@ -115,7 +128,7 @@ export function TodayView({
 
       {/* ════ 快捷操作 ════ */}
       <section className="relative max-w-[1100px] mx-auto px-6 mt-rhythm-md">
-        <div className="flex gap-3">
+        <motion.div className="flex gap-3" variants={staggerContainer}>
           {quickActions.map((action) => {
             const Icon = action.icon;
             return (
@@ -129,27 +142,31 @@ export function TodayView({
                   'text-b3 font-medium text-text-secondary hover:text-text-primary',
                   'transition-all duration-beat-x2',
                 )}
+                variants={heroStatVariant}
                 whileHover={{ y: -2 }}
                 whileTap={{ scale: 0.96 }}
+                transition={SPRING.default}
               >
                 <Icon className={cn('w-4 h-4', accentText[action.accent])} strokeWidth={1.5} />
                 {action.label}
               </motion.button>
             );
           })}
-        </div>
+        </motion.div>
       </section>
 
       {/* ════ 今日统计：状态反馈 ════ */}
       <section className="relative max-w-[1100px] mx-auto px-6 mt-rhythm-md">
-        <div className="grid grid-cols-2 lg:grid-cols-4 gap-rhythm-sm">
+        <motion.div className="grid grid-cols-2 lg:grid-cols-4 gap-rhythm-sm" variants={staggerContainer}>
           {heroStats.map((stat) => {
             const Icon = stat.icon;
             return (
               <motion.div
                 key={stat.label}
+                variants={heroStatVariant}
                 whileHover={{ y: -2, scale: 1.02 }}
                 whileTap={{ scale: 0.97 }}
+                transition={SPRING.default}
               >
                 <DashboardCard
                   accent={stat.accent}
@@ -178,7 +195,7 @@ export function TodayView({
               </motion.div>
             );
           })}
-        </div>
+        </motion.div>
       </section>
 
       {/* 🎯 目标进度（目标梯度效应，紧邻计划区） */}
@@ -195,15 +212,15 @@ export function TodayView({
 
       {/* ════ 知识预览：回到学习现场 ════ */}
       <section className="relative max-w-[1100px] mx-auto px-6 mt-rhythm-lg pb-rhythm-xl">
-        <div className="mb-rhythm-sm">
+        <motion.div className="mb-rhythm-sm" {...fadeInUp}>
           <ModuleRitualHeader
             title="知识预览"
             note="最近的学习足迹"
             sealChar="星"
             sealColor="#40AB92"
             compact
           />
-        </div>
+        </motion.div>
 
         {isLoading ? (
           <div className="grid grid-cols-2 lg:grid-cols-3 gap-rhythm-sm">
@@ -216,11 +233,18 @@ export function TodayView({
             ))}
           </div>
         ) : knowledgeCards.length > 0 ? (
-          <div className="grid grid-cols-2 lg:grid-cols-3 gap-rhythm-sm">
+          <motion.div
+            className="grid grid-cols-2 lg:grid-cols-3 gap-rhythm-sm"
+            variants={staggerContainer}
+            initial="hidden"
+            animate="visible"
+          >
             {knowledgeCards.map((card, i) => (
-              <KnowledgePreviewCard key={card.id} card={card} index={i} />
+              <motion.div key={card.id} variants={heroStatVariant}>
+                <KnowledgePreviewCard card={card} index={i} />
+              </motion.div>
             ))}
-          </div>
+          </motion.div>
         ) : (
           <div className="text-center py-rhythm-xl">
             <p className="text-b2 text-text-tertiary">

client/src/styles/performance.css

@@ -48,22 +48,3 @@
     opacity: 0;
   }
 }
-
-/* ── 页面内容渐入动画（stagger） ── */
-/* 适用于页面多个 section 的渐入出场，子元素按顺序渐入 */
-.stagger-fade-in > * {
-  animation: fade-in-up 0.35s ease-out both;
-}
-.stagger-fade-in > :nth-child(1) { animation-delay: 0ms; }
-.stagger-fade-in > :nth-child(2) { animation-delay: 60ms; }
-.stagger-fade-in > :nth-child(3) { animation-delay: 120ms; }
-.stagger-fade-in > :nth-child(4) { animation-delay: 180ms; }
-.stagger-fade-in > :nth-child(5) { animation-delay: 240ms; }
-.stagger-fade-in > :nth-child(6) { animation-delay: 300ms; }
-.stagger-fade-in > :nth-child(7) { animation-delay: 360ms; }
-.stagger-fade-in > :nth-child(8) { animation-delay: 420ms; }
-
-@keyframes fade-in-up {
-  from { opacity: 0; transform: translateY(12px); }
-  to   { opacity: 1; transform: translateY(0); }
-}