feat: 动画

src/pages/Home/Home.tsx

 import type React from 'react'
 import type React from 'react'
 import { Virtuoso } from 'react-virtuoso'
 import { Virtuoso } from 'react-virtuoso'
+import { motion } from 'framer-motion'
 import styles from './Home.module.less'
 import styles from './Home.module.less'
 import { QuestionList } from './components/QuestionList'
 import { QuestionList } from './components/QuestionList'
 import { WelcomeWord } from './components/WelcomeWord'
 import { WelcomeWord } from './components/WelcomeWord'
@@ -10,6 +11,32 @@ import { GradientBackground } from '@/components/GradientBackground'
 import { ChatEditor } from '@/components/ChatEditor'
 import { ChatEditor } from '@/components/ChatEditor'
 import { RECOMMEND_QUESTIONS_OTHER, RECOMMEND_QUESTIONS_PRODUCT } from '@/config/recommendQuestion'
 import { RECOMMEND_QUESTIONS_OTHER, RECOMMEND_QUESTIONS_PRODUCT } from '@/config/recommendQuestion'
 
 
+function getAnimationProps(delay: number) {
+  return {
+    variants: {
+      hidden: {
+        opacity: 0,
+        y: 50,
+        scale: 0.9,
+        rotateX: -6,
+      },
+      visible: {
+        opacity: 1,
+        y: 0,
+        scale: 1,
+        rotateX: 0,
+        transition: {
+          duration: 0.4,
+          delay: delay * 0.1,
+          ease: [0.25, 0.1, 0.25, 1],
+        },
+      },
+    },
+    initial: 'hidden',
+    animate: 'visible',
+  }
+}
+
 export const Home: React.FC = () => {
 export const Home: React.FC = () => {
   return (
   return (
     <div className={styles.homePage}>
     <div className={styles.homePage}>
@@ -27,9 +54,10 @@ export const Home: React.FC = () => {
 
 
                   {/* 欢迎语 */}
                   {/* 欢迎语 */}
                   <div className="gap-[20px] flex justify-center flex-row flex-wrap  mt-[42px] sm:mt-[62px] lg:mt-[112px]">
                   <div className="gap-[20px] flex justify-center flex-row flex-wrap  mt-[42px] sm:mt-[62px] lg:mt-[112px]">
-                    <WelcomeWord />
-                    <QuestionList questions={RECOMMEND_QUESTIONS_PRODUCT} dotColor="#D4CCFF" title="产品问答" iconImg={HomeIcon1} />
-                    <QuestionList questions={RECOMMEND_QUESTIONS_OTHER} dotColor="#CBECFF" title="其他问答" iconImg={HomeIcon2} />
+
+                    <motion.div {...getAnimationProps(1)}><WelcomeWord /></motion.div>
+                    <motion.div {...getAnimationProps(2)}><QuestionList questions={RECOMMEND_QUESTIONS_PRODUCT} dotColor="#D4CCFF" title="产品问答" iconImg={HomeIcon1} /></motion.div>
+                    <motion.div {...getAnimationProps(3)}><QuestionList questions={RECOMMEND_QUESTIONS_OTHER} dotColor="#CBECFF" title="其他问答" iconImg={HomeIcon2} /></motion.div>
                   </div>
                   </div>
                 </div>
                 </div>
               )}
               )}