slidev-click-animations

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>