slidev-click-animations

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Click Animations in Slidev

Slidev中的点击动画

This skill covers all click-based animations in Slidev, including v-click, v-after, v-clicks, v-switch, and motion directives for creating dynamic, engaging presentations.

本技能涵盖Slidev中所有基于点击的动画，包括v-click、v-after、v-clicks、v-switch以及motion指令，助你打造动态、引人入胜的演示文稿。

When to Use This Skill

适用场景

Revealing content step by step
Building up complex diagrams
Creating suspense or emphasis
Guiding audience attention
Interactive presentation flow

逐步展示内容
构建复杂图表
制造悬念或突出重点
引导观众注意力
打造交互式演示流程

v-click Basics

v-click基础

Component Syntax

组件语法

markdown

<v-click>

This appears on the first click

</v-click>

markdown

<v-click>

点击第一次时显示此内容

</v-click>

Directive Syntax

指令语法

markdown

<div v-click>
  This also appears on click
</div>

markdown

<div v-click>
  点击时也会显示此内容
</div>

Multiple v-clicks

多v-click元素

markdown

<v-click>First</v-click>
<v-click>Second</v-click>
<v-click>Third</v-click>

Each appears on successive clicks.

markdown

<v-click>第一个</v-click>
<v-click>第二个</v-click>
<v-click>第三个</v-click>

每个元素会在连续点击时依次显示。

Click Positioning

点击位置控制

Explicit Position

显式位置

markdown

<div v-click="1">Appears first</div>
<div v-click="3">Appears third</div>
<div v-click="2">Appears second</div>

markdown

<div v-click="1">第一个显示</div>
<div v-click="3">第三个显示</div>
<div v-click="2">第二个显示</div>

Relative Position

相对位置

markdown

<div v-click>First (click 1)</div>
<div v-click="'+1'">Second (click 2)</div>
<div v-click="'+2'">Fourth (click 4)</div>

markdown

<div v-click>第一个（第1次点击）</div>
<div v-click="'+1'">第二个（第2次点击）</div>
<div v-click="'+2'">第四个（第4次点击）</div>

Same Click (v-after)

同次点击显示（v-after）

markdown

<v-click>Main content</v-click>
<v-after>Appears with main content</v-after>

Or using relative position:

markdown

<v-click>Main content</v-click>
<v-click="'+0'">Also appears with main</v-click>

markdown

<v-click>主要内容</v-click>
<v-after>与主要内容同时显示</v-after>

或使用相对位置：

markdown

<v-click>主要内容</v-click>
<v-click="'+0'">也与主要内容同时显示</v-click>

v-clicks for Lists

列表的v-clicks动画

Basic List Animation

基础列表动画

markdown

<v-clicks>

- First item
- Second item
- Third item

</v-clicks>

markdown

<v-clicks>

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

</v-clicks>

Nested Lists

嵌套列表

markdown

<v-clicks depth="2">

- Parent 1
  - Child 1.1
  - Child 1.2
- Parent 2
  - Child 2.1

</v-clicks>

markdown

<v-clicks depth="2">

- 父项1
  - 子项1.1
  - 子项1.2
- 父项2
  - 子项2.1

</v-clicks>

Every N Items

每N项一组

markdown

<v-clicks every="2">

- Items 1-2 together
- (same click)
- Items 3-4 together
- (same click)

</v-clicks>

markdown

<v-clicks every="2">

- 第1-2项同时显示
- （同一次点击）
- 第3-4项同时显示
- （同一次点击）

</v-clicks>

Hide on Click

点击隐藏元素

v-click.hide

markdown

<div v-click.hide>This disappears on click</div>

markdown

<div v-click.hide>点击时会隐藏</div>

v-click with hide

带hide的v-click

markdown

<v-click hide>
  This content will be hidden after the click
</v-click>

markdown

<v-click hide>
  点击后此内容会被隐藏
</v-click>

Range-based Hiding

基于范围的隐藏

markdown

<div v-click.hide="[2, 4]">
  Visible until click 2, hidden on clicks 2-3, visible again at click 4
</div>

markdown

<div v-click.hide="[2, 4]">
  在第2次点击前可见，第2-3次点击时隐藏，第4次点击时再次显示
</div>

v-switch

Switch between different content based on clicks:

markdown

<v-switch>
  <template #1>Content at click 1</template>
  <template #2>Content at click 2</template>
  <template #3>Content at click 3</template>
  <template #4-6>Content at clicks 4, 5, and 6</template>
  <template #default>Default content (before click 1)</template>
</v-switch>

根据点击切换不同内容：

markdown

<v-switch>
  <template #1>第1次点击时的内容</template>
  <template #2>第2次点击时的内容</template>
  <template #3>第3次点击时的内容</template>
  <template #4-6>第4、5、6次点击时的内容</template>
  <template #default>默认内容（第1次点击前）</template>
</v-switch>

Practical Example

实用示例

markdown

<v-switch>
  <template #0>
    <h2>Step 1: Initialize</h2>
    <p>Set up the project structure</p>
  </template>
  <template #1>
    <h2>Step 2: Configure</h2>
    <p>Add configuration files</p>
  </template>
  <template #2>
    <h2>Step 3: Build</h2>
    <p>Run the build command</p>
  </template>
</v-switch>

markdown

<v-switch>
  <template #0>
    <h2>步骤1：初始化</h2>
    <p>搭建项目结构</p>
  </template>
  <template #1>
    <h2>步骤2：配置</h2>
    <p>添加配置文件</p>
  </template>
  <template #2>
    <h2>步骤3：构建</h2>
    <p>执行构建命令</p>
  </template>
</v-switch>

Motion Animations

Motion动画

Basic Motion

基础Motion动画

markdown

<div
  v-motion
  :initial="{ opacity: 0, y: 100 }"
  :enter="{ opacity: 1, y: 0 }"
>
  Slides up and fades in
</div>

markdown

<div
  v-motion
  :initial="{ opacity: 0, y: 100 }"
  :enter="{ opacity: 1, y: 0 }"
>
  向上滑动并淡入
</div>

Motion with Clicks

结合点击的Motion动画

markdown

<div
  v-motion
  :initial="{ x: -100, opacity: 0 }"
  :enter="{ x: 0, opacity: 1 }"
  :click-1="{ scale: 1.2 }"
  :click-2="{ x: 100 }"
  :leave="{ opacity: 0 }"
>
  Complex motion sequence
</div>

markdown

<div
  v-motion
  :initial="{ x: -100, opacity: 0 }"
  :enter="{ x: 0, opacity: 1 }"
  :click-1="{ scale: 1.2 }"
  :click-2="{ x: 100 }"
  :leave="{ opacity: 0 }"
>
  复杂的动画序列
</div>

Motion Variants

Motion变体

Variant	When Applied
`initial`	Initial state
`enter`	When slide is entered
`click-N`	At click N
`click-N-M`	During clicks N to M
`leave`	When leaving slide

变体	应用时机
`initial`	初始状态
`enter`	进入幻灯片时
`click-N`	第N次点击时
`click-N-M`	第N到M次点击期间
`leave`	离开幻灯片时

Motion Properties

Motion属性

markdown

<div
  v-motion
  :initial="{
    opacity: 0,
    scale: 0.5,
    x: -200,
    y: 100,
    rotate: -45
  }"
  :enter="{
    opacity: 1,
    scale: 1,
    x: 0,
    y: 0,
    rotate: 0,
    transition: {
      duration: 500,
      ease: 'easeOut'
    }
  }"
>
  Animated element
</div>

markdown

<div
  v-motion
  :initial="{
    opacity: 0,
    scale: 0.5,
    x: -200,
    y: 100,
    rotate: -45
  }"
  :enter="{
    opacity: 1,
    scale: 1,
    x: 0,
    y: 0,
    rotate: 0,
    transition: {
      duration: 500,
      ease: 'easeOut'
    }
  }"
>
  动画元素
</div>

Click Counter Configuration

点击次数配置

Setting Total Clicks

设置总点击次数

yaml

---
clicks: 5
---

Forces the slide to have exactly 5 clicks.

yaml

---
clicks: 5
---

强制该幻灯片有且仅有5次点击。

Auto Clicks

自动计算点击次数

yaml

---
clicks: auto
---

Automatically determines click count (default).

yaml

---
clicks: auto
---

自动计算点击次数（默认设置）。

Styling Click States

点击状态样式设置

CSS Classes

CSS类

When an element has

v-click

```
.slidev-vclick-target
```
- Always applied
```
.slidev-vclick-hidden
```
- When hidden
```
.slidev-vclick-current
```
- Currently active click
```
.slidev-vclick-prior
```
- Already revealed

当元素使用

v-click

时：

```
.slidev-vclick-target
```
- 始终生效
```
.slidev-vclick-hidden
```
- 元素隐藏时生效
```
.slidev-vclick-current
```
- 当前激活的点击项
```
.slidev-vclick-prior
```
- 已显示的元素

Custom Transitions

自定义过渡效果

css

/* styles/index.css */
.slidev-vclick-target {
  transition: all 0.5s ease;
}

.slidev-vclick-hidden {
  opacity: 0;
  transform: translateY(20px);
}

css

/* styles/index.css */
.slidev-vclick-target {
  transition: all 0.5s ease;
}

.slidev-vclick-hidden {
  opacity: 0;
  transform: translateY(20px);
}

Scale Animation

缩放动画

css

.slidev-vclick-target {
  transition: all 0.3s ease;
}

.slidev-vclick-hidden {
  transform: scale(0);
  opacity: 0;
}

css

.slidev-vclick-target {
  transition: all 0.3s ease;
}

.slidev-vclick-hidden {
  transform: scale(0);
  opacity: 0;
}

Blur Effect

模糊效果

css

.slidev-vclick-hidden {
  filter: blur(10px);
  opacity: 0;
}

css

.slidev-vclick-hidden {
  filter: blur(10px);
  opacity: 0;
}

Practical Patterns

实用模式

Building a List

构建列表

markdown

undefined

markdown

undefined

Key Points

关键点

<v-clicks>

Performance - Optimized for speed
Security - Built-in protection
Scalability - Handles growth
Maintainability - Clean architecture

</v-clicks> ```

<v-clicks>

性能 - 针对速度优化
安全性 - 内置防护机制
可扩展性 - 支持业务增长
可维护性 - 简洁的架构

</v-clicks> ```

Progressive Diagram

渐进式图表

markdown

undefined

markdown

undefined

Architecture

架构

<div class="grid grid-cols-3 gap-4"> <div v-click="1" class="box">Frontend</div> <div v-click="2" class="box">API</div> <div v-click="3" class="box">Database</div> </div> <Arrow v-click="4" x1="100" y1="100" x2="200" y2="100" /> <Arrow v-click="5" x1="300" y1="100" x2="400" y2="100" /> ```

<div class="grid grid-cols-3 gap-4"> <div v-click="1" class="box">前端</div> <div v-click="2" class="box">API</div> <div v-click="3" class="box">数据库</div> </div> <Arrow v-click="4" x1="100" y1="100" x2="200" y2="100" /> <Arrow v-click="5" x1="300" y1="100" x2="400" y2="100" /> ```

Before/After Reveal

前后对比展示

markdown

undefined

markdown

undefined

The Solution

解决方案

<div v-click.hide="2"> <h2>Before</h2> <pre>Old code here</pre> </div> <div v-click="2"> <h2>After</h2> <pre>New improved code</pre> </div> ```

<div v-click.hide="2"> <h2>优化前</h2> <pre>旧代码</pre> </div> <div v-click="2"> <h2>优化后</h2> <pre>改进后的新代码</pre> </div> ```

Animated Highlight

动画高亮

markdown

undefined

markdown

undefined

Important Concept

重要概念

<p v-click="1"> This is a paragraph with <span v-motion :initial="{ background: 'transparent' }" :click-2="{ background: '#fef08a' }" class="px-1" > highlighted text </span> that appears. </p> ```

<p v-click="1"> 这是一段包含 <span v-motion :initial="{ background: 'transparent' }" :click-2="{ background: '#fef08a' }" class="px-1" > 高亮文本 </span> 的段落。 </p> ```

Step-by-Step Code

分步代码展示

markdown

```typescript {1|2|3|all}
const name = 'Slidev'
const version = '0.50'
console.log(`${name} v${version}`)
```

markdown

```typescript {1|2|3|all}
const name = 'Slidev'
const version = '0.50'
console.log(`${name} v${version}`)
```

Best Practices

最佳实践

1. Don't Overuse

1. 避免过度使用

❌ Too many clicks

markdown

<v-click>Word</v-click>
<v-click>by</v-click>
<v-click>word</v-click>
<v-click>is</v-click>
<v-click>annoying</v-click>

✓ Meaningful groups

markdown

<v-click>First complete thought</v-click>
<v-click>Second complete thought</v-click>

❌ 点击次数过多

markdown

<v-click>单</v-click>
<v-click>字</v-click>
<v-click>显</v-click>
<v-click>示</v-click>
<v-click>令</v-click>
<v-click>人</v-click>
<v-click>厌</v-click>
<v-click>烦</v-click>

✓ 有意义的分组

markdown

<v-click>完整的第一句内容</v-click>
<v-click>完整的第二句内容</v-click>

2. Group Related Content

2. 相关内容分组

markdown

<v-click>
  <h3>Feature A</h3>
  <p>Description of feature A</p>
</v-click>

<v-click>
  <h3>Feature B</h3>
  <p>Description of feature B</p>
</v-click>

markdown

<v-click>
  <h3>功能A</h3>
  <p>功能A的描述</p>
</v-click>

<v-click>
  <h3>功能B</h3>
  <p>功能B的描述</p>
</v-click>

3. Consider Timing

3. 考虑动画时长

markdown

<!-- Good for demos - immediate -->
<div v-click>Quick reveal</div>

<!-- Good for emphasis - animated -->
<div
  v-motion
  :initial="{ opacity: 0 }"
  :enter="{ opacity: 1, transition: { duration: 800 } }"
>
  Dramatic reveal
</div>

markdown

<!-- 适合演示 - 即时显示 -->
<div v-click>快速显示</div>

<!-- 适合突出重点 - 带动画 -->
<div
  v-motion
  :initial="{ opacity: 0 }"
  :enter="{ opacity: 1, transition: { duration: 800 } }"
>
  戏剧性的显示效果
</div>

4. Use for Navigation Cues

4. 用作导航提示

markdown

<v-click at="1">
  👉 First, we'll look at setup
</v-click>

<v-click at="2">
  👉 Then, we'll implement features
</v-click>

<v-click at="3">
  👉 Finally, we'll deploy
</v-click>

markdown

<v-click at="1">
  👉 首先，我们来看设置步骤
</v-click>

<v-click at="2">
  👉 接下来，我们实现功能
</v-click>

<v-click at="3">
  👉 最后，我们进行部署
</v-click>

Debugging Tips

调试技巧

Check click count: Look at the click counter in presenter mode
Verify positions: Use explicit positions when order matters
Test all clicks: Click through every animation before presenting
Check CSS conflicts: Custom styles might interfere

检查点击次数：在演示者模式中查看点击计数器
验证位置顺序：当顺序重要时使用显式位置
测试所有点击：演示前点击所有动画进行测试
检查CSS冲突：自定义样式可能会干扰动画效果

Output Format

输出格式

When creating click animations:

markdown

undefined

创建点击动画时的参考格式：

markdown

undefined

[Slide Title]

[幻灯片标题]

[Static introductory content if any]

<v-clicks>

[Point revealed at click 1]
[Point revealed at click 2]
[Point revealed at click 3]

</v-clicks> <v-click at="4">

[Conclusion that appears last]

</v-click>

CLICK SEQUENCE:

[What appears/happens]
[What appears/happens]
[What appears/happens]
[What appears/happens]

TOTAL CLICKS: [N]

undefined

[静态介绍内容（如有）]

<v-clicks>

[第1次点击显示的要点]
[第2次点击显示的要点]
[第3次点击显示的要点]

</v-clicks> <v-click at="4">

[最后显示的结论]

</v-click>

点击序列：

[显示/发生的内容]
[显示/发生的内容]
[显示/发生的内容]
[显示/发生的内容]

总点击次数：[N]

",