H5步骤条节点逐个渐显需用transition-delay或animation实现：前者通过:nth-child设置阶梯延迟，后者用@keyframes配合animation-delay控制更精细动画；须避免display/visibility过渡，优先使用opacity和transform。
为 H5 页面中步骤条（Step）的节点点亮添加时间差过渡，核心是让每个节点在激活时不是同时亮起，而是按顺序逐个渐显——这不能靠单个 `transition` 一次性实现，而需结合 CSS 动画延迟（`transition-delay`）或 `animation` 配合 `@keyframes` 控制节奏。
用 transition-delay 实现逐节点延时点亮
适用于节点数量固定、状态由 class 控制（如 `.step.active`）的步骤条。关键点：每个节点根据索引设置不同延迟值。
- 给每个 step 节点添加唯一类名或使用 `:nth-child(n)` 选择器
- 为 `.step.active` 设置基础过渡（如 `opacity` 或 `transform`），再为每个节点单独设 `transition-delay`
- 例如第 1 个节点延迟 0s，第 2 个延迟 0.2s，第 3 个延迟 0.4s……形成阶梯式点亮效果
示例代码：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
.step {
opacity: 0.4;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.step.active {
opacity: 1;
transform: scale(1.1);
}
.step:nth-child(1).active { transition-delay: 0s; }
.step:nth-child(2).active { transition-delay: 0.2s; }
.step:nth-child(3).active { transition-delay: 0.4s; }
.step:nth-child(4).active { transition-delay: 0.6s; }
用 animation + @keyframes 更灵活控制节奏
当需要更精细的入场动画（如从下往上浮入、颜色分段填充）或动态增删步骤时，推荐用 `animation`。每个节点可独立触发相同动画但带不同 `animation-delay`。
- 定义一个 `@keyframes` 动画，比如 `fadeInUp`：从 `opacity: 0, transform: translateY(10px)` 到 `opacity: 1, transform: translateY(0)`
- 为 `.step.active` 应用该动画，并通过 `animation-delay` 错开启动时机
- 动画时长（`animation-duration`）和延迟（`animation-delay`）建议保持比例协调，如都用 0.3s 间隔
注意事项与避坑点
这些细节常导致过渡失效或效果异常：
- 避免对 `display` 或 `visibility` 做 transition：它们不可动画，应改用 `opacity` + `pointer-events` 或 `transform` 模拟显隐
- 确保初始状态可计算：比如 `opacity: 0` → `opacity: 1` 可过渡；但 `opacity: unset` → `1` 不会触发
- JS 批量添加 active 类时要留出渲染间隙：若用 JS 一次性给多个节点加 `.active`，浏览器可能合并重绘，导致延迟失效；可用 `setTimeout` 或 `requestAnimationFrame` 分帧添加
- 优先使用 `transform` 和 `opacity`：它们触发 GPU 加速，比 `left`/`top`/`height` 更流畅且不触发重排
