# アニメーション

# クリックアニメーション

# v-click

要素に対して"クリックアニメーション"を適用するには、v-clickディレクティブか<v-click>コンポーネントを使用することができます。

# Hello

<!-- コンポーネントの使い方: "次へ"を押すまで、ここから下の内容は表示されません -->
<v-click>

Hello World

</v-click>

<!-- ディレクティブの使い方: 2回目の"次へ"を押すまで、ここから下の内容は表示されません -->
<div v-click class="text-xl p-2">

Hey!

</div>

# v-after

v-afterはv-clickに似ていますが、直前のv-clickがトリガーされたときに要素を可視化します。

<div v-click>Hello</div>
<div v-after>World</div>

"次へ"ボタンを押した時に、HelloとWorldの両方が一緒に表示されます。

# v-click-hide

v-clickと同じですが、要素を表示するのではなく、クリックした後に要素を非表示にします。

<div v-click-hide>Hello</div>

# v-clicks

v-clicksはコンポーネントとしてのみ提供されています。これはv-clickディレクティブをそのすべての子要素に適用するためのショートハンドです。特にリストを扱う場合に便利です。

<v-clicks>

- Item 1
- Item 2
- Item 3
- Item 4

</v-clicks>

"次へ"をクリックするたびに、項目が表示されるようになります。

# カスタムクリックカウント

デフォルトでは、Slidevは次のスライドに進む前に必要なステップ数をカウントします。clicksというフロントマターオプションを記述することで、この設定をオーバーライドできます。

---
# このスライドでは、次のスライドに進むまでに10回クリックする
clicks: 10
---

# 並び替え

ディレクティブにクリックインデックスを渡すことで、公開する順番をカスタマイズすることができます。

<div v-click>1</div>
<div v-click>2</div>
<div v-click>3</div>

<!-- 順番が逆転する -->
<div v-click="3">1</div>
<div v-click="2">2</div>
<div v-click="1">3</div>

---
clicks: 3
---

<!-- 3回クリックした後に見えるようになる -->
<v-clicks at="3">
  <div>Hi</div>
</v-clicks>

# 要素のトランジション

要素にv-clickディレクティブを適用すると、slidev-vclick-targetというクラス名が付与されます。要素が非表示になった場合、クラス名slidev-vclick-hiddenが付与されます。例：

<div class="slidev-vclick-target slidev-vclick-hidden">テキスト</div>

クリックすると、以下のようになります

<div class="slidev-vclick-target">テキスト</div>

デフォルトでは、これらのクラスにはわずかな透明度のトランジションが適用されます。

// デフォルト

.slidev-vclick-target {
  transition: opacity 100ms ease;
}

.slidev-vclick-hidden {
  opacity: 0;
  pointer-events: none;
}

トランジション効果をカスタマイズするために、カスタムスタイルシートでそれらをオーバーライドすることができます。

例えば、スケールアップのトランジションは次のようにして実現することができます：

// styles.css

.slidev-vclick-target {
  transition: all 500ms ease;
}

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

特定のスライドもしくはレイアウトにのみアニメーションを適用する場合

.slidev-page-7,
.slidev-layout.my-custom-layout {
  .slidev-vclick-target {
    transition: all 500ms ease;
  }

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

詳細はスタイルのカスタマイズを参照してください。

# モーション

Slidevは@vueuse/motionを内蔵しています。任意の要素にモーションを適用するためにv-motionディレクティブを使用することができます。例：

<div
  v-motion
  :initial="{ x: -80 }"
  :enter="{ x: 0 }">
  Slidev
</div>

Slidevというテキストは初期化時に-80pxから元の位置へ移動します。

注: Slidevはパフォーマンスのために次のスライドをプリロードします、つまり、ページに遷移する前にアニメーションが始まる可能性があります。正しく動作させるために、特定のスライドに対してプリロードを無効にすることができます。

---
preload: false
---

もしくは要素のライフサイクルをv-ifで制御することで、きめ細やかな制御を行うこともできます。

<div
  v-if="$slidev.nav.currentPage === 7"
  v-motion
  :initial="{ x: -80 }"
  :enter="{ x: 0 }">
  Slidev
</div>

詳細： デモ | @vueuse/motion | v-motion | Presets

# ページのトランジション

現在のバージョンでは、スライドのビルトインサポートはまだ提供されていません。次のメジャーバージョンでサポートする予定です。それまでは、カスタムスタイルやライブラリを使ってスライドを作成することができます。