动画指南 动画是幻灯片演示的重要组成部分。Slidev 提供了从简单到复杂的各种幻灯片动画制作方法。本指南将告诉你如何有效地使用它们。
点击动画 此处我们用 “点击” 一词来代表幻灯片中的一步动画。一张幻灯片可以有一个或多个点击，每个点击可以触发一个或多个动画 - 例如，显示或隐藏元素。可以通过按下 space 键或 → 键来触发一步点击动画。
NOTE
自 v0.48.0 版起，我们重写了点击动画系统，使其行为更加一致。在一些情况下，它可能会改变现有幻灯片的行为。本页展示的是新的点击系统，您可以在 #1279 中找到有关该重写的更多细节。
v-click 可以使用
md
md
md
md
md
- Item 1
- Item 2
- Item 3
每一步动画会依次显示列表中的元素。它还接受 depth prop 用于嵌套列表：
md
- Item 1
- Item 1.1
- Item 1.2
- Item 2
- Item 2.1
- Item 2.2
另外，你可以使用 every prop 来指定每次点击后显示的项目数：
md
- Item 1.1
- Item 1.2
- Item 2.1
- Item 2.2
动画时机 默认情况下，点击动画是依次触发的。你可以通过使用 at prop 或带有值的 v-click 指令来自定义的动画发生时机。
就像 CSS 布局系统一样，点击动画发生时机可以是 “相对的” (relative) 或 “绝对的” (absolute)：
相对的时机 动画发生时机基于相对于前一个也是相对的时机的动画计算。若该动画是第一个相对时机的动画，则从 0 开始计算：
md
```js {none|1|2}{at:'+5'}
1 // 第 7 步时高亮
2 // 第 8 步时高亮
```NOTE
当没有给 v-click 传入参数时，将使用默认值 '+1'，即动画发生在上一个动画的后一步。
事实上，v-after 只是带有 at="+0" 的 v-click 的简写：
md
at prop 的格式
只有以 '+' 或 '-' 开头的字符串值，如 '+1'，才会被视为相对位置：
ValueKind'-1', '+1'相对时机+1 === 1绝对时机'1'绝对时机故不要忘记为相对值添加单引号。
绝对时机 传入的值就是触发动画所需的点击次数：
md
```js {none|1|2}{at:3}
1 // 3 步动画后高亮
2 // 4 步动画后高亮
```混合情况 你可以混合地使用绝对和相对时机：
md
md```js {1|2}{at:1}
1 + 1
'a' + 'b'
```
```js {1|2}{at:1}
= 2
= 'ab'
```显示后隐藏 你还可以通过传递一个数组来为 v-click 指令指定显示的时机和隐藏的时机：
md
在第 2 和 3 步时动画将隐藏。
这将在第 3 步动画后显示，之后在第 4 步动画后隐藏。
md
在第 1 步动画显示
在第 2,3,4 步动画显示
在第 5,6 步动画显示
更多细节请查阅 VSwitch 组件。
自定义步骤总数 默认地，Slidev 会自动计算在下一张幻灯片之前需要多少次动画。你可以通过 frontmatter 中的 clicks 选项来覆盖这个值：
yaml---
# 10 步动画后进入下一张幻灯片
clicks: 10
---过渡效果 当 v-click 指令应用于元素时，元素会拥有 slidev-vclick-target 类名。当元素被隐藏时，还会附加类名 slidev-vclick-hidden。例如：
html
点击一次后，它可能会变成：html
默认地，以下样式会应用于这些类：css.slidev-vclick-target {
transition: opacity 100ms ease;
}
.slidev-vclick-hidden {
opacity: 0;
pointer-events: none;
}你可以在自定义样式表中覆盖它们，以自定义过渡效果。例如，你可以通过以下方式实现缩放效果：
css/* styles.css */
.slidev-vclick-target {
transition: all 500ms ease;
}
.slidev-vclick-hidden {
transform: scale(0);
}若要针对某几张幻灯片或布局指定动画：
scss.slidev-page-7,
.slidev-layout.my-custom-layout {
.slidev-vclick-target {
transition: all 500ms ease;
}
.slidev-vclick-hidden {
transform: scale(0);
}
}参阅 自定义样式 以了解更多。
Motion 动画 Slidev 内置了 @vueuse/motion。你可以使用 v-motion 指令来赋予元素 Motion 动画：
html v-motion :initial="{ x: -80 }" :enter="{ x: 0 }" :leave="{ x: 80 }" > Slidev