# 错峰 Stagger > 一组元素一个接一个出现，每个差零点零几秒。 分类：动效 · 角色：基础（手感，哪里都能用、不抢眼） [全部组件和流程](https://www.dachuiai.com/llms.txt) · [动效选型规则](https://www.dachuiai.com/guides/motion.md) ## 给 AI：用户把这个组件发给了你 1. 先看用户的项目：框架、页面类型、现在的风格、手机还是电脑为主。 2. 对照下面的「适合 / 不适合」判断合不合适。不合适就直接说，并从[动效选型规则](https://www.dachuiai.com/guides/motion.md)或[全部组件](https://www.dachuiai.com/llms.txt)里另挑一个。 3. 合适就按「装进项目」装好，示例里的文字和图片换成用户自己的。 4. 告诉用户用了什么、放在哪个文件、以后想改快慢、颜色、大小改哪个参数。 ## 什么时候用 - 适合：卡片墙、列表、菜单项第一次出现的时候。 - 不适合：超过 20 个元素（最后一个等太久，要分批或缩短间隔）；用户来回切换的内容。 - 适合的网站：官网、本地小店、电商、作品集、SaaS、后台、内容站、活动页 - 放在：列表、卡片 - 手机上：好用：和电脑上一样。 - 性能代价：低：纯 CSS 过渡。 - 常搭配：[滚动出现 Scroll Reveal](https://www.dachuiai.com/c/scroll-reveal.md)、[布局动画 Layout Animation](https://www.dachuiai.com/c/layout-animation.md)、[缓动 Easing](https://www.dachuiai.com/c/easing.md) ## 装进项目 - 写法：React 18 以上 + TypeScript + Tailwind CSS v4，一个文件就能用，不引用别的组件。 - 依赖：`npm i lucide-react`（lucide-react 只有最后的演示示例用到；不留示例的话，删掉对应的 import 就不用装） - 文件：原样存成 `stagger.tsx`（比如 `src/components/stagger.tsx`）。能跑命令就下载[原文](https://www.dachuiai.com/code/stagger.tsx)，比手抄准：`curl -fsSL -o src/components/stagger.tsx https://www.dachuiai.com/code/stagger.tsx`（Windows 写 `curl.exe`）。下载完看一眼第一行是 `import`，不是网页。 - 导出：`Stagger` 是可以直接用的部分；最后的 `export default` 是演示示例，只作参考。 - 图片：示例用了本站的图片按名字拼出的 `/art/<名字>.jpg`。换成用户自己的图；只想先看效果，可以从本站同样的路径下载，放进项目的 public 目录。 - 注意：Stagger 一挂载就播放，不等滚进屏幕：只用在首屏或者点了才出现的内容。首屏以下的卡片要依次出现，用滚动出现的 Reveal 传 delay={(i % 列数) * 60}。step 默认 50 毫秒，间隔加起来不超过 0.5 秒。 - 保留代码里 `prefers-reduced-motion` 的处理：用户开了「减弱动态效果」时内容照样完整显示。 - Next.js（有 app 文件夹）：文件第一行加 `'use client';`。 - 用 JavaScript 不用 TypeScript：Vite 和 Next.js 都能直接用 .tsx 文件；也可以删掉类型标注，改名 .jsx。 - 没有 Tailwind：先装 Tailwind CSS v4（Vite 项目 `npm i tailwindcss @tailwindcss/vite`，vite 配置的 plugins 里加 `tailwindcss()`，入口引入的那个 CSS 文件（一般是 `src/index.css`）第一行写 `@import "tailwindcss";`），或者把类名改写成项目用的样式。 - 已经装了 Tailwind v3：别为了一个组件升级。类名大多通用，少数 v4 写法要换，比如焦点框 `outline-2` 在 v3 里要写成 `outline outline-2`。 - 不是 React（Vue、Svelte、小程序、纯 HTML）：照着代码的做法改写，时长、曲线、参数保持一样。Wix、有赞这类建站平台装不进代码，告诉用户去平台自带的动效设置里找。 ## 参数 | 参数 | 默认值 | 作用 | | --- | --- | --- | | `children` | | 包在里面的内容 | | `step` | `50` | 一个接一个之间隔多少毫秒 | | `className` | `''` | 加在最外层的类名，用来调大小、位置、间距 | ## 你可以说 > 卡片墙加 Stagger 错峰动画：卡片依次出现，每张间隔 0.05 秒。 ## 完整代码 ```tsx import {useState, type ReactNode} from 'react'; import {RotateCcw} from 'lucide-react'; /* --------------------------------------------------------------- * Stagger 错峰 * 一组元素不是同时出现，而是一个接一个，每个差零点零几秒。 * 里的每个子元素会依次淡入、上移；换 key 可以重播。 * ------------------------------------------------------------- */ export function Stagger({children, step = 50, className = ''}: {children: ReactNode[]; step?: number; className?: string}) { return (
{children.map((c, i) => (
{c}
))}
); } /* ---------------- 示例：作品墙，可以切换"同时 / 依次"对比 ---------------- */ const ART = [['planet', '远行星'], ['dunes', '沙丘'], ['fluid-rose', '颜料'], ['aurora', '极光'], ['sunset', '落日'], ['ice', '蓝冰'], ['peaks', '晨山'], ['lava', '地火']]; export default function StaggerDemo() { const [step, setStep] = useState(50); const [run, setRun] = useState(0); return (
{[[0, '同时'], [50, '依次']].map(([v, l]) => ( ))}
{ART.map(([n, t]) => ( e.preventDefault()} className="group relative block h-[205px] overflow-hidden rounded-2xl focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"> {t} ))}
); } ```