<p>用 transition-delay 按索引动态设延迟（如 index * 0.1s）可实现卡片依次入场；推荐 JS 设置 style.transitionDelay 或 CSS 自定义属性配合 :nth-child 预设档位，避免写死或使用 transition: all；优先用 transform 和 opacity 过渡以保障性能。</p>
transition-delay 怎么让卡片依次入场
卡片组用 transition 做入场动画时，单靠 transition 本身不会产生“波浪感”——它只管单个元素的状态变化。真正控制“依次”和“错落”的，是每个卡片的 transition-delay 值。这个值不能写死，得根据索引动态计算，比如第 0 个卡片延时 0s，第 1 个 0.1s，第 2 个 0.2s……
常见错误是直接在 CSS 里写死所有卡片的 delay（如用 nth-child），但这样无法响应新增/删除卡片，也不利于复用组件。更稳妥的做法是在 JS 中为每个卡片设置 style.transitionDelay，或用 CSS 自定义属性配合 :nth-child 动态注入。
- 使用
transform: translateY(20px) scale(0.95)+opacity: 0作为初始状态，过渡到transform: none和opacity: 1 - 过渡属性必须明确写出：
transition: opacity 0.3s ease, transform 0.3s ease；只写transition: all容易触发重排且不可控 - 如果卡片由 React/Vue 渲染，避免在
useEffect或mounted中批量 setStyle，应结合ref或querySelectorAll按节点顺序赋值，防止渲染时机错乱
CSS 自定义属性 + :nth-child 能否替代 JS 计算 delay
可以，但有兼容性和灵活性限制。CSS 里没法做乘法，--delay: calc(var(--i) * 0.1s) 是无效语法——calc() 不支持变量参与单位运算。所以只能靠预设档位，比如最多支持 12 张卡片，就写 12 条 :nth-child(1) { --delay: 0s; } 到 :nth-child(12) { --delay: 1.1s; }。
这种写法适合静态卡片列表，或者卡片数严格可控的后台管理页。一旦卡片数量动态超过预设，超出部分会失去 delay，集体“砸下来”。
立即学习“前端免费学习笔记（深入）”；
- 必须搭配
transition-delay: var(--delay)使用，且该属性需写在触发 transition 的类上（如.card--enter） - IE 完全不支持 CSS 自定义属性，若需兼容，JS 方案是唯一选择
- Vue 的
v-for可以用:style="{ '--delay': `${index * 0.1}s` }"，但注意 SSR 时 index 可能为 0，需确保服务端与客户端一致
opacity + transform 过渡为什么比 top/left 更可靠
用 top 或 left 做入场位移，会触发 layout（布局重排），动画一卡一卡的；而 transform 和 opacity 属于合成属性，浏览器会把它们交给 GPU 单独处理，帧率稳定，尤其在中低端设备上差异明显。
另一个常被忽略的点：如果卡片父容器用了 overflow: hidden，而入场动画又依赖 transform: translateY(-20px) 这种向上偏移，可能被裁掉——此时应改用 scale(0.9) 配合透明度，或给父容器加 padding-top 预留空间。
- 不要混用
transform: translateX()和left，二者同时存在会导致 transition 失效或跳变 - 移动端 Safari 对
transform: scale()的 subpixel 渲染有轻微模糊，可加will-change: transform缓解（但别滥用，会增加内存开销） - 如果卡片内含文字，入场时缩放可能导致字体发虚，建议入场完成后再移除
scale，或改用transform: translateY()单一方向
transition-timing-function 怎么选才像“波浪”而不是“弹跳”
“波浪感”不是指物理上的正弦曲线，而是视觉节奏的起伏错落——靠的是延迟叠加 + 缓动函数的组合。用 cubic-bezier(0.25, 0.46, 0.45, 0.94)（即 ease-out 的变体）比 ease-in-out 更合适：开头稍快、结尾柔和，多个卡片按 delay 排开后，整体看起来就像水波推着往前走。
千万别用 ease-in 或 bounce 类函数，前者会让卡片“慢启动”，削弱节奏感；后者在多卡片场景下会因 timing 错位显得混乱。
- 所有卡片必须用同一套
transition-timing-function，否则 delay 再准也压不住节奏断裂 - 如果用 CSS-in-JS（如 styled-components），避免在组件内联写
transitionTimingFunction，应抽成主题变量统一管理 - 动画时长建议控制在
0.25s–0.35s：短于0.2s感觉仓促，长于0.4s会拖慢用户感知流畅度
真正难的不是写对那几行 transition，而是让 delay 的生成逻辑跟卡片生命周期对齐——比如卡片异步加载完成、筛选后重排、折叠展开时，delay 值都得重新算。这时候硬编码的 CSS 规则基本失效，JS 控制几乎是绕不开的路。
