feat: 动画

src/pages/Home/Home.tsx

@@ -27,8 +27,8 @@ 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 />
                     <WelcomeWord />
-                    <QuestionList title="产品问答" iconImg={HomeIcon1} />
-                    <QuestionList title="其他问答" iconImg={HomeIcon2} />
+                    <QuestionList dotColor="#D4CCFF" title="产品问答" iconImg={HomeIcon1} />
+                    <QuestionList dotColor="#CBECFF" title="其他问答" iconImg={HomeIcon2} />
                   </div>
                   </div>
                 </div>
                 </div>
               )}
               )}

src/pages/Home/components/QuestionList/QuestionList.tsx

 import { Button } from '@nextui-org/react'
 import { Button } from '@nextui-org/react'
 import type React from 'react'
 import type React from 'react'
 import { Image } from '@nextui-org/image'
 import { Image } from '@nextui-org/image'
+import { motion } from 'framer-motion'
 
 
 interface QuestionListProps {
 interface QuestionListProps {
   title: string
   title: string
   iconImg: string
   iconImg: string
+  dotColor: string
 }
 }
 
 
-export const QuestionList: React.FC<QuestionListProps> = ({ title, iconImg }) => {
+const list = {
+  hidden: { opacity: 1, scale: 0 },
+  visible: {
+    opacity: 1,
+    scale: 1,
+    transition: {
+      delayChildren: 0.2,
+      staggerChildren: 0.1,
+    },
+  },
+}
+
+const item = {
+  hidden: { y: 20, opacity: 0 },
+  visible: {
+    y: 0,
+    opacity: 1,
+  },
+}
+
+export const QuestionList: React.FC<QuestionListProps> = ({ dotColor, title, iconImg }) => {
   return (
   return (
     <div className="h-[276px] bg-white box-border px-[20px] py-[24px] rounded-[24px] w-full sm:w-[360px] md:w-[300px]">
     <div className="h-[276px] bg-white box-border px-[20px] py-[24px] rounded-[24px] w-full sm:w-[360px] md:w-[300px]">
       <h3 className="h-[32px] flex items-center">
       <h3 className="h-[32px] flex items-center">
         <Image className="w-[32px] h-[32px]" src={iconImg} alt="" />
         <Image className="w-[32px] h-[32px]" src={iconImg} alt="" />
         <span className="text-[18px] ml-[12px] font-medium">{title}</span>
         <span className="text-[18px] ml-[12px] font-medium">{title}</span>
       </h3>
       </h3>
-      <ul className="mt-[18px] flex flex-col gap-[8px]">
-        <li>
+      <motion.ul
+        initial="hidden"
+        animate="visible"
+        variants={list}
+        className="mt-[18px] flex flex-col gap-[8px]"
+      >
+        <motion.li
+          variants={item}
+        >
           <Button disableRipple className="w-full bg-[#F7FCFF]">
           <Button disableRipple className="w-full bg-[#F7FCFF]">
             <div className="w-full text-nowrap text-ellipsis overflow-hidden">
             <div className="w-full text-nowrap text-ellipsis overflow-hidden">
-              <span className="text-[#27353c]">推荐几款60周岁还能投的医疗保推荐几款60周岁还能投的医疗保</span>
+              <span style={{ color: dotColor }}>·</span>
+              <span className="text-[#27353c] ml-[8px]">推荐几款60周岁还能投的医疗保推荐几款60周岁还能投的医疗保</span>
             </div>
             </div>
           </Button>
           </Button>
-        </li>
-        <li>
+        </motion.li>
+        <motion.li
+          variants={item}
+        >
           <Button disableRipple className="w-full bg-[#F7FCFF]">
           <Button disableRipple className="w-full bg-[#F7FCFF]">
             <div className="w-full text-nowrap text-ellipsis overflow-hidden">
             <div className="w-full text-nowrap text-ellipsis overflow-hidden">
-              <span className="text-[#27353c]">推荐几款60周岁还能投的医疗保推荐几款60周岁还能投的医疗保</span>
+              <span style={{ color: dotColor }}>·</span>
+              <span className="text-[#27353c] ml-[8px]">推荐几款60周岁还能投的医疗保推荐几款60周岁还能投的医疗保</span>
             </div>
             </div>
           </Button>
           </Button>
-        </li>
-        <li>
+        </motion.li>
+        <motion.li
+          variants={item}
+        >
           <Button disableRipple className="w-full bg-[#F7FCFF]">
           <Button disableRipple className="w-full bg-[#F7FCFF]">
             <div className="w-full text-nowrap text-ellipsis overflow-hidden">
             <div className="w-full text-nowrap text-ellipsis overflow-hidden">
-              <span className="text-[#27353c]">推荐几款60周岁还能投的医疗保推荐几款60周岁还能投的医疗保</span>
+              <span style={{ color: dotColor }}>·</span>
+              <span className="text-[#27353c] ml-[8px]">推荐几款60周岁还能投的医疗保推荐几款60周岁还能投的医疗保</span>
             </div>
             </div>
           </Button>
           </Button>
-        </li>
-        <li>
+        </motion.li>
+        <motion.li
+          variants={item}
+        >
           <Button disableRipple className="w-full bg-[#F7FCFF]">
           <Button disableRipple className="w-full bg-[#F7FCFF]">
             <div className="w-full text-nowrap text-ellipsis overflow-hidden">
             <div className="w-full text-nowrap text-ellipsis overflow-hidden">
-              <span className="text-[#27353c]">推荐几款60周岁还能投的医疗保推荐几款60周岁还能投的医疗保</span>
+              <span style={{ color: dotColor }}>·</span>
+              <span className="text-[#27353c] ml-[8px]">推荐几款60周岁还能投的医疗保推荐几款60周岁还能投的医疗保</span>
             </div>
             </div>
           </Button>
           </Button>
-        </li>
-      </ul>
+        </motion.li>
+      </motion.ul>
     </div>
     </div>
   )
   )
 }
 }