⚠️

重要前提

安装AI Skills的关键前提是：必须科学上网，且开启TUN模式，这一点至关重要，直接决定安装能否顺利完成，在此郑重提醒三遍：科学上网，科学上网，科学上网。查看完整安装教程 →

Slidev点击动画教程：v-click、v-after、v-clicks、v-switch和motion指令详解

slidev-click-animations by yoanbernabeu/slidev-skills

56 周安装量

23 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-click-animations

演讲技巧内容创作 Vue

🇨🇳中文介绍

Slidev 中的点击动画

本技能涵盖 Slidev 中所有基于点击的动画，包括 v-click、v-after、v-clicks、v-switch 和 motion 指令，用于创建动态、引人入胜的演示文稿。

何时使用此技能

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

v-click 基础

组件语法

<v-click>

此内容在第一次点击时出现

</v-click>

指令语法

<div v-click>
  此内容也在点击时出现
</div>

多个 v-click

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

每个内容在连续点击时依次出现。

点击定位

显式位置

<div v-click="1">首先出现</div>
<div v-click="3">第三个出现</div>
<div v-click="2">第二个出现</div>

相对位置

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

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

同一点击（v-after）

<v-click>主要内容</v-click>
<v-after>与主要内容同时出现</v-after>

或使用相对位置：

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

<v-clicks>

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

</v-clicks>

<v-clicks depth="2">

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

</v-clicks>

<v-clicks every="2">

- 第 1-2 项一起出现
- （同一点击）
- 第 3-4 项一起出现
- （同一点击）

</v-clicks>

<div v-click.hide>此内容在点击时消失</div>

带 hide 的 v-click

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

基于范围的隐藏

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

根据点击在不同内容之间切换：

<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>

<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>

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

<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>

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

<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>

点击计数器配置

设置总点击次数

强制幻灯片恰好有 5 次点击。

---
clicks: auto
---

自动确定点击次数（默认）。

样式化点击状态

当元素具有 v-click 时：

.slidev-vclick-target - 始终应用
.slidev-vclick-hidden - 隐藏时
.slidev-vclick-current - 当前活动的点击
.slidev-vclick-prior - 已揭示的内容

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

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

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

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

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

# 关键点

<v-clicks>

1. **性能** - 为速度优化
2. **安全性** - 内置保护
3. **可扩展性** - 处理增长
4. **可维护性** - 清晰的架构

</v-clicks>

# 架构

<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" />

# 解决方案

<div v-click.hide="2">
  <h2>之前</h2>
  <pre>旧代码在此</pre>
</div>

<div v-click="2">
  <h2>之后</h2>
  <pre>新的改进代码</pre>
</div>

# 重要概念

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

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

1. 不要过度使用

❌ 点击次数过多

<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>

2. 分组相关内容

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

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

<!-- 适用于演示 - 立即 -->
<div v-click>快速揭示</div>

<!-- 适用于强调 - 动画 -->
<div
  v-motion
  :initial="{ opacity: 0 }"
  :enter="{ opacity: 1, transition: { duration: 800 } }"
>
  戏剧性的揭示
</div>

4. 用于导航提示

<v-click at="1">
  👉 首先，我们将查看设置
</v-click>

<v-click at="2">
  👉 然后，我们将实现功能
</v-click>

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

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

创建点击动画时：

# [幻灯片标题]

[如果有的话，静态介绍性内容]

<v-clicks>

- [点击 1 时揭示的要点]
- [点击 2 时揭示的要点]
- [点击 3 时揭示的要点]

</v-clicks>

<v-click at="4">

[最后出现的结论]

</v-click>

---
点击序列：
1. [出现/发生什么]
2. [出现/发生什么]
3. [出现/发生什么]
4. [出现/发生什么]

总点击次数：[N]

🇺🇸English

Click Animations in 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.

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

Component Syntax

<v-click>

This appears on the first click

</v-click>

Directive Syntax

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

Multiple v-clicks

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

Each appears on successive clicks.

Click Positioning

Explicit Position

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

Relative Position

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

Same Click (v-after)

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

Or using relative position:

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

v-clicks for Lists

Basic List Animation

<v-clicks>

- First item
- Second item
- Third item

</v-clicks>

Nested Lists

<v-clicks depth="2">

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

</v-clicks>

Every N Items

<v-clicks every="2">

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

</v-clicks>

Hide on Click

v-click.hide

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

v-click with hide

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

Range-based Hiding

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

v-switch

Switch between different content based on clicks:

<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>

Practical Example

<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>

Motion Animations

Basic Motion

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

Motion with Clicks

<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>

Motion Variants

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

Motion Properties

<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>

Click Counter Configuration

Setting Total Clicks

---
clicks: 5
---

Forces the slide to have exactly 5 clicks.

Auto Clicks

---
clicks: auto
---

Automatically determines click count (default).

Styling Click States

CSS Classes

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

Custom Transitions

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

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

Scale Animation

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

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

Blur Effect

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

Practical Patterns

Building a List

# Key Points

<v-clicks>

1. **Performance** - Optimized for speed
2. **Security** - Built-in protection
3. **Scalability** - Handles growth
4. **Maintainability** - Clean architecture

</v-clicks>

Progressive Diagram

# 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" />

Before/After Reveal

# 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>

Animated Highlight

# 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>

Step-by-Step Code

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

Best Practices

1. Don't Overuse

❌ Too many clicks

<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

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

2. Group Related Content

<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>

3. Consider Timing

<!-- 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>

4. Use for Navigation Cues

<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>

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

Output Format

When creating click animations:

# [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:
1. [What appears/happens]
2. [What appears/happens]
3. [What appears/happens]
4. [What appears/happens]

TOTAL CLICKS: [N]

Weekly Installs

Repository

yoanbernabeu/sl…v-skills

GitHub Stars

First Seen

Jan 25, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode46

codex45

gemini-cli45

github-copilot44

amp44

kimi-cli44

NotebookLM Python库：自动化访问Google NotebookLM，实现AI内容创作与文档处理

1,800 周安装

Slidev点击动画教程：v-click、v-after、v-clicks、v-switch和motion指令详解

🇨🇳中文介绍

Slidev 中的点击动画

何时使用此技能

v-click 基础

组件语法

指令语法

多个 v-click

点击定位

显式位置

相对位置

相关 Skills

同一点击（v-after）

列表的 v-clicks

基本列表动画

嵌套列表

每 N 项

点击时隐藏

v-click.hide

带 hide 的 v-click

基于范围的隐藏

v-switch

实际示例

运动动画

基本运动

带点击的运动

运动变体

运动属性

点击计数器配置

设置总点击次数

自动点击

样式化点击状态

CSS 类

自定义过渡

缩放动画

模糊效果

实用模式

构建列表

渐进式图表

揭示前/后

动画高亮

逐步代码

最佳实践

1. 不要过度使用

2. 分组相关内容

3. 考虑时机

4. 用于导航提示

调试技巧

输出格式

🇺🇸English

Click Animations in Slidev

When to Use This Skill

v-click Basics

Component Syntax

Directive Syntax

Multiple v-clicks

Click Positioning

Explicit Position

Relative Position

Same Click (v-after)

v-clicks for Lists

Basic List Animation

Nested Lists

Every N Items

Hide on Click

v-click.hide

v-click with hide

Range-based Hiding

v-switch

Practical Example

Motion Animations

Basic Motion

Motion with Clicks

Motion Variants

Motion Properties

Click Counter Configuration

Setting Total Clicks

Auto Clicks

Styling Click States

CSS Classes