slidev-transitions

Slidev のスライドトランジション

このスキルでは、組み込みトランジション、カスタムアニメーション、方向指定トランジションなど、Slidev でスライド間にスムーズなトランジションを追加する方法を説明します。

このスキルを使用する場面

• プレゼンテーションに磨きをかける
• スムーズなナビゲーション体験を作成する
• スライドの切り替えを強調する
• プレゼンテーションのテーマに合わせる
• 独自の視覚効果を作成する

トランジションの設定

グローバルトランジション（フロントマター）

---
transition: slide-left
---

プレゼンテーション内のすべてのスライドに適用されます。

スライドごとのトランジション

---
transition: fade
---

# This slide fades in

---
transition: slide-up
---

# This slide slides up

区切り文字でインライン指定

# Slide 1

---
transition: zoom
---

# Slide 2 (zooms in)

組み込みトランジション

フェードトランジション

名前	効果
fade	シンプルなフェードイン／フェードアウト
fade-out	フェードアウトしてから表示

---
transition: fade
---

スライドトランジション

名前	効果
slide-left	新しいスライドが右から入る
slide-right	新しいスライドが左から入る
slide-up	新しいスライドが下から入る
slide-down	新しいスライドが上から入る

---
transition: slide-left
---

ビュートランジション

最新の View Transitions API を使用します。

---
transition: view-transition
---

注：View Transitions API のブラウザーサポートが必要です。

方向指定トランジション

前進／後退で異なるトランジション

| を使って、前進時と後退時のトランジションを区切ります。

---
transition: slide-left | slide-right
---

• 前進時：スライドが左に移動します
• 後退時：スライドが右に移動します

よくあるパターン

# Natural slide direction
---
transition: slide-left | slide-right
---

# Vertical navigation
---
transition: slide-up | slide-down
---

# Fade forward, slide back
---
transition: fade | slide-right
---

カスタムトランジション

CSS ベースのカスタムトランジション

styles/index.css を作成します。

/* Define custom transition */
.my-transition-enter-active,
.my-transition-leave-active {
  transition: all 0.5s ease;
}

.my-transition-enter-from {
  opacity: 0;
  transform: translateX(100px) rotate(10deg);
}

.my-transition-leave-to {
  opacity: 0;
  transform: translateX(-100px) rotate(-10deg);
}

フロントマターで使用します。

---
transition: my-transition
---

トランジションクラス

Slidev は Vue のトランジションクラスを使用します。

クラス	適用されるタイミング
[name]-enter-from	入場開始時の状態
[name]-enter-active	入場トランジション中
[name]-enter-to	入場終了時の状態
[name]-leave-from	退場開始時の状態
[name]-leave-active	退場トランジション中
[name]-leave-to	退場終了時の状態

トランジションの例

スケールトランジション

.scale-enter-active,
.scale-leave-active {
  transition: all 0.4s ease;
}

.scale-enter-from {
  opacity: 0;
  transform: scale(0.8);
}

.scale-leave-to {
  opacity: 0;
  transform: scale(1.2);
}

フリップトランジション

.flip-enter-active,
.flip-leave-active {
  transition: all 0.6s ease;
  transform-style: preserve-3d;
}

.flip-enter-from {
  opacity: 0;
  transform: rotateY(-90deg);
}

.flip-leave-to {
  opacity: 0;
  transform: rotateY(90deg);
}

ぼかしトランジション

.blur-enter-active,
.blur-leave-active {
  transition: all 0.5s ease;
}

.blur-enter-from {
  opacity: 0;
  filter: blur(20px);
}

.blur-leave-to {
  opacity: 0;
  filter: blur(20px);
}

バウンストランジション

.bounce-enter-active {
  animation: bounce-in 0.5s;
}

.bounce-leave-active {
  animation: bounce-out 0.5s;
}

@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bounce-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}

スワイプトランジション

.swipe-enter-active,
.swipe-leave-active {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.swipe-enter-from {
  opacity: 0;
  transform: translateX(100%);
}

.swipe-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}

View Transitions API

基本的な使い方

---
transition: view-transition
---

名前付きビュートランジション

<div style="view-transition-name: hero">
  Content that transitions smoothly
</div>

連続するスライド上で同じ view-transition-name を持つ要素は、位置間を移動するアニメーションが適用されます。

実用例

---
transition: view-transition
---

<div style="view-transition-name: card" class="w-32 h-32 bg-blue-500">
  Small card
</div>

---
transition: view-transition
---

<div style="view-transition-name: card" class="w-64 h-64 bg-blue-500">
  Card grows!
</div>

トランジションのタイミング

期間

.slow-fade-enter-active,
.slow-fade-leave-active {
  transition: all 1s ease; /* 1 second */
}

イージング関数

/* Common easing functions */
.ease-in { transition-timing-function: ease-in; }
.ease-out { transition-timing-function: ease-out; }
.ease-in-out { transition-timing-function: ease-in-out; }
.linear { transition-timing-function: linear; }

/* Cubic bezier for custom easing */
.custom { transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }

遅延

.delayed-enter-active {
  transition: all 0.5s ease 0.2s; /* 0.2s delay */
}

スライドの種類ごとのトランジション

コンテンツに応じて異なるトランジションを使用する

---
layout: cover
transition: fade
---

# Title Slide

---
layout: default
transition: slide-left
---

# Content Slide

---
layout: section
transition: zoom
---

# Section Break

---
layout: end
transition: fade
---

# Thank You

トランジションの無効化

トランジションなし

---
transition: none
---

全体で無効化する

---
transition: false
---

ベストプラクティス

1. 一貫性を保つ

全体を通して同じトランジションの系統を使用します。

# Good: Consistent slide family
---
transition: slide-left | slide-right
---

2. コンテンツの種類に合わせる

コンテンツ	推奨されるトランジション
表紙／タイトル	fade
通常のコンテンツ	slide-left
セクションの区切り	fade または zoom
デモ／コード	fade
結論	fade

3. 控えめにする

❌ 派手すぎる例

.crazy-enter-active {
  animation: spin 2s, bounce 1s, flash 0.5s;
}

✓ プロフェッショナルな例

.subtle-enter-active {
  transition: opacity 0.3s ease;
}

4. 対象者を考慮する

• 技術系プレゼンテーション：トランジションは最小限にします
• クリエイティブなプレゼンテーション：より自由に設定できます
• 長時間のプレゼンテーション：注意をそらす要素を減らします

5. パフォーマンスをテストする

複雑なトランジションは、次の状況で遅延することがあります。

• 大規模なプレゼンテーション
• 古いデバイス
• PDF へのエクスポート時

トランジションのプリセット

プロフェッショナル向けセット

/* styles/transitions.css */

/* Gentle fade */
.pro-fade-enter-active,
.pro-fade-leave-active {
  transition: opacity 0.3s ease;
}
.pro-fade-enter-from,
.pro-fade-leave-to {
  opacity: 0;
}

/* Smooth slide */
.pro-slide-enter-active,
.pro-slide-leave-active {
  transition: all 0.35s ease-out;
}
.pro-slide-enter-from {
  opacity: 0;
  transform: translateX(30px);
}
.pro-slide-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

遊び心のあるセット

/* Energetic bounce */
.playful-enter-active {
  animation: pop-in 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes pop-in {
  0% { transform: scale(0); opacity: 0; }
  80% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

出力形式

トランジションを設定する際は、次の形式を使用します。

---
# GLOBAL TRANSITION (first slide)
transition: [transition-name] | [backward-transition]
---

# Slide content...

---
# PER-SLIDE OVERRIDE (if needed)
transition: [different-transition]
---

# Different slide content...

トランジション計画：

1. 表紙スライド：[トランジション]
2. コンテンツスライド：[トランジション]
3. セクションの区切り：[トランジション]
4. 結論：[トランジション]

カスタム CSS（必要な場合）：

.[name]-enter-active { ... }
.[name]-leave-to { ... }