F04▸A006▸framer-motion

Staggered List

清單一個個進場

難度 ★★★★★標籤 stagger · 清單 · variants3 min read

效果簡述

清單項目一個個依序滑入。重點是用 variants + staggerChildren，而不是給每個 item 算 delay。前者好維護、後者一改數量就崩。

01量身設計
02親自開發
03測試交付
04持續維護

▸ 預設|stagger 0.08, y 進場

Claude Code Prompt

💬 Claude Code Prompt

參考：A006 staggered list
技術：Framer Motion variants + staggerChildren

具體行為:
- 父層 motion.ul，子層 motion.li
- container variants 用 transition.staggerChildren: 0.08
- item variants: hidden { opacity: 0, y: 12 } / show { opacity: 1, y: 0 }
- 父 whileInView="show" initial="hidden" viewport={ once: true, amount: 0.3 }

限制：
- 不要每個 item 寫獨立 delay
- stagger 間隔 0.05~0.1 秒，再多會拖

完整程式碼

StaggeredList.tsx

'use client'

import { motion } from 'framer-motion'

const items = ['設計系統', '動畫規範', '無障礙', '效能預算', '部署流程']

const container = {
hidden: {},
show: { transition: { staggerChildren: 0.08 } },
}

const item = {
hidden: { opacity: 0, y: 12 },
show: { opacity: 1, y: 0, transition: { duration: 0.4 } },
}

export function StaggeredList() {
return (
  <motion.ul
    variants={container}
    initial="hidden"
    whileInView="show"
    viewport={{ once: true, amount: 0.3 }}
    className="space-y-2"
  >
    {items.map((text) => (
      <motion.li key={text} variants={item}>
        {text}
      </motion.li>
    ))}
  </motion.ul>
)
}

何時用

✅ 功能清單、特色列表、步驟說明
✅ Side panel 進場
✅ 設定頁的選項群組

何時別用

❌ 超過 12 個項目（會看起來拖很久）
❌ 已經有其他重點動畫在跑時
❌ 表格列（資料量大時很煩）

我踩過的坑

給每個 item 算 delay 是反模式：item 數量變動時要重算。用 staggerChildren 一行解決。
viewport.once 漏掉會重播：每次滾出滾回都重新 stagger，體感是壞掉。預設 once: true。
amount: 0.3 比 0.5 好：項目太多時 0.5 永遠湊不滿 viewport。

效果簡述

Claude Code Prompt

完整程式碼

何時用

何時別用

我踩過的坑

相關效果

搜尋