slidev-click-animations

Slidev のクリックアニメーション

このスキルでは、動的で魅力的なプレゼンテーションを作成するための、v-click、v-after、v-clicks、v-switch、モーションディレクティブなど、Slidev のすべてのクリックベースのアニメーションを扱います。

このスキルを使う場面

• コンテンツを段階的に表示する
• 複雑な図を組み立てる
• サスペンスや強調を演出する
• 聴衆の注意を誘導する
• インタラクティブなプレゼンテーションの流れを作る

v-click の基本

コンポーネント構文

<v-click>

This appears on the first click

</v-click>

ディレクティブ構文

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

複数の v-click

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

クリックするたびに、順番に表示されます。

クリック位置の指定

明示的な位置

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

相対位置

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

同じクリックで表示（v-after）

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

相対位置を使うこともできます。

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

リストで使う v-clicks

リストの基本的なアニメーション

<v-clicks>

- First item
- Second item
- Third item

</v-clicks>

入れ子になったリスト

<v-clicks depth="2">

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

</v-clicks>

N 項目ごと

<v-clicks every="2">

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

</v-clicks>

クリック時に非表示にする

v-click.hide

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

hide を指定した v-click

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

範囲に基づく非表示

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

v-switch

クリックに応じて異なるコンテンツを切り替えます。

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

実践例

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

モーションアニメーション

基本的なモーション

<div
  v-motion
  :initial="{ opacity: 0, y: 100 }"
  :enter="{ opacity: 1, y: 0 }"
>
  Slides up and fades in
</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 }"
>
  Complex motion sequence
</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'
    }
  }"
>
  Animated element
</div>

クリック数の設定

合計クリック数の設定

---
clicks: 5
---

スライドのクリック数を正確に 5 回に設定します。

クリック数の自動設定

---
clicks: auto
---

クリック数を自動的に判定します（デフォルト）。

クリック状態のスタイル設定

CSS クラス

要素に 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;
}

実践的なパターン

リストを組み立てる

# Key Points

<v-clicks>

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

</v-clicks>

段階的な図

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

ビフォー／アフターの表示

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

アニメーション付きハイライト

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

コードを段階的に表示する

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

ベストプラクティス

1. 使いすぎない

❌ クリック数が多すぎる

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

✓ 意味のあるグループ

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

2. 関連するコンテンツをまとめる

<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. タイミングを考慮する

<div v-click>Quick reveal</div>


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

4. ナビゲーションの手がかりとして使う

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

デバッグのヒント

1. クリック数を確認する：プレゼンターモードでクリックカウンターを確認します
2. 位置を確認する：順序が重要な場合は、明示的な位置を指定します
3. すべてのクリックをテストする：プレゼンテーションの前に、すべてのアニメーションをクリックして確認します
4. CSS の競合を確認する：カスタムスタイルが干渉する場合があります

出力形式

クリックアニメーションを作成するとき：

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