feat: animation list

Author: wkylin

src/components/stateless/AnimatedList/index.jsx

@@ -0,0 +1,51 @@
+import React, { useEffect, useMemo, useState } from 'react'
+
+import { AnimatePresence, motion } from 'motion/react'
+import clsx from 'clsx'
+
+const AnimatedListItem = ({ children }) => {
+  const animations = {
+    initial: { scale: 0, opacity: 0 },
+    animate: { scale: 1, opacity: 1, originY: 0 },
+    exit: { scale: 0, opacity: 0 },
+    transition: { type: 'spring', stiffness: 350, damping: 40 },
+  }
+
+  return (
+    <motion.div {...animations} layout className="mx-auto w-full">
+      {children}
+    </motion.div>
+  )
+}
+
+const AnimatedList = React.memo(({ children, className, delay = 1000, ...props }) => {
+  const [index, setIndex] = useState(0)
+  const childrenArray = useMemo(() => React.Children.toArray(children), [children])
+
+  useEffect(() => {
+    if (index < childrenArray.length - 1) {
+      const timeout = setTimeout(() => {
+        setIndex((prevIndex) => (prevIndex + 1) % childrenArray.length)
+      }, delay)
+
+      return () => clearTimeout(timeout)
+    }
+  }, [index, delay, childrenArray.length])
+
+  const itemsToShow = useMemo(() => {
+    const result = childrenArray.slice(0, index + 1).reverse()
+    return result
+  }, [index, childrenArray])
+
+  return (
+    <div className={clsx(`flex flex-col items-center gap-4`, className)} {...props}>
+      <AnimatePresence>
+        {itemsToShow.map((item) => (
+          <AnimatedListItem key={item.key}>{item}</AnimatedListItem>
+        ))}
+      </AnimatePresence>
+    </div>
+  )
+})
+
+export default AnimatedList

src/pages/demo/index.jsx

@@ -15,9 +15,10 @@ import SongPng from '@assets/images/song.png'
 import XuePng from '@assets/images/xue.png'
 
 import { Command, Cannabis, Beer, Mail } from 'lucide-react'
+import ScriptView from '@stateless/ScriptView'
+import AnimatedList from '@stateless/AnimatedList'
 
 import styles from './index.module.less'
-import ScriptView from '@stateless/ScriptView'
 
 const companies = [SpringPng, HePng, SongPng, XuePng]
 const columns = [
@@ -99,6 +100,21 @@ const ProDemo = () => {
   return (
     <FixTabPanel>
       <ScriptView showMultiplePackageOptions={true} codeLanguage="shell" commandMap={customCommandMap} />
+      <section style={{ height: 240, overflow: 'hidden', margin: 20 }}>
+        <AnimatedList>
+          {Array.from({ length: 10 }, () => {
+            id: Math.random()
+          })
+            .flat()
+            .map((item, index) => (
+              <div className="flex flex-col items-center justify-center gap-4">
+                <div className="flex items-center justify-center gap-4">
+                  <div className="h-16 w-100 rounded-full bg-gradient-to-br from-purple-500 to-blue-500" />
+                </div>
+              </div>
+            ))}
+        </AnimatedList>
+      </section>
       <StarBack />
       <StickyCard cards={[...Array.from({ length: 4 }, () => ({ id: Math.random() }))]} />
       <div className="relative w-full overflow-hidden bg-[#0a192f]">