点击动画 v-click

演示的核心节奏是"点击推进"。Slidev 用 v-click 系列指令控制元素何时出现，实现逐层展开、逐步讲解的效果。

v-click 指令

在元素上添加 v-click 属性，该元素会在下一次点击时出现：

# 架构演进

- 单体架构
- v-click 点击后出现：微服务架构
- v-click 再次点击出现：云原生

写法（MDC 或 HTML 属性二选一）：

- v-click 单体架构
- v-click 微服务架构
- v-click 云原生

::v-click

这段内容在点击后出现。

::

<v-click>点击后出现的文字</v-click>

每次按键或点击，v-click 元素按顺序逐批显示。初始页面上只显示未标注的元素。

批量列表动画 v-clicks

对列表的每一项做逐步显示，用 v-clicks（复数）一行搞定：

::v-clicks

- 第一项
- 第二项
- 第三项

::

v-clicks 会把列表的每一项依次分配到后续每次点击。等价于给每个 li 手动加 v-click，但写法更简洁。

v-after 前序显示

v-after 让元素紧跟在当前点击批次之后自动显示，无需额外点击：

- 已显示的内容
- v-after 跟随上一批次一起出现
- v-click 需要点击才出现

• v-after 依赖前面最近的点击序号，自动提前到该序号
• 适合"上一项出现时顺带补一句"的场景

v-click.hide 点击后隐藏

默认 v-click 是"隐藏 → 显示"；v-click.hide 反向：先显示，点击后隐藏：

- 一开始可见
- v-click.hide 点击后消失
- v-click 点击后出现

<v-click.hide>点击后隐藏的文字</v-click.hide>

适合"先展示完整答案，再点击消失、露出结论"的互动演示。

点击次数与 v-clicks 数量

每次点击消耗一个序号：

点击次数	显示内容
初始	无 v-click / v-after 元素
第 1 次	序号 1 的元素（含 v-after 跟随）
第 2 次	序号 2 的元素
第 n 次	序号 n 的元素

页面底部会有进度提示（1 / 5），表示总点击步数，进入下一页需要消耗完全部步数。

组合示例

先隐藏后展示的问答

# 问题

答案是：::v-click 42 ::

::v-click

解释：这是道格拉斯·亚当斯的名梗。

::

列表逐步展开 + 跟随说明

::v-clicks

- 第一步：环境准备
- 第二步：初始化
- 第三步：编写内容

::

::v-after

（以上三步按顺序演示）

::

常用点击指令速查

指令	行为
v-click	点击后出现
v-clicks	批量：列表每项依次出现
v-after	跟随上一批次自动出现
v-click.hide	点击后隐藏
v-click="2"	在第 2 次点击时出现（指定序号）
v-click.hide="1"	第 1 次点击时隐藏

v-click="序号" 的精确时序控制见下一章「动画时机控制」，这里先用默认顺序实现"逐层点击"的讲解节奏。