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

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]