[Slidev] ワンクリックで要素の非表示と別要素の表示を行う方法

この記事が役立つかもしれない人

• クリックで要素の非表示と表示を同時に行いたい人
• 表示を切り替えた際の表示位置を調整したい人
• クリック操作による表示変更も含めてエクスポートしたい人

手順

ワンクリックで要素の非表示と表示を行えるようにする

slides.md

---
layout: default
---

# 表示切り替えのテスト

<div v-click.hide>

## 内容 A

- `v-click.hide` の付いた要素内にある要素はクリックすると隠れます

</div>

<div v-after>

## 内容 B

- 内容 A の非表示と同時に現れます
- `v-after` は一つ前にある `v-click` が発動したのをトリガーとして表示を行います

</div>

ワンクリックでの要素の非表示と表示を達成できました！
内容 B 上部の余白については、このあと対応していきます！

詳細

重要なのは div 要素に付いているディレクティブ v-click.hide と v-after です。

v-click.hide の付いた要素はクリックすることで隠れます。これはクリックで表示させる v-click の派生ディレクティブです。

v-after は一つ前の v-click がトリガーされた時に表示されます。これは v-click.hide の場合でもトリガーされます。

余白を作らずに v-after の要素を表示する

先ほど確認した通り、v-after で表示させた要素は上に余白を残して表示されています。
これは v-click.hide で隠れた div 要素が隠れただけ (opacity: 0;) で存在しているために起こります。そのため "v-after の付いた要素" が "見えないが存在している要素" の下に出現することで余白が生まれてしまいます。

対応としては v-click.hide の要素を隠す CSS クラスを改造して非表示にした要素を無効化します。

slides.md

---
layout: default
---

# 表示切り替えのテスト

<div v-click.hide>

## 内容 A

- `v-click.hide` の付いた要素内にある要素はクリックすると隠れます

</div>

<div v-after>

## 内容 B

- 内容 A の非表示と同時に現れます
- `v-after` は一つ前にある `v-click` が発動したのをトリガーとして表示を行います

</div>

<!-- ここから下を追加しただけ -->

<style>
.slidev-vclick-hidden {
  display: none;
}
</style>

詳細

要素が非表示になると Slidev が自動で slidev-vclick-hidden というクラスを付与します。
上記の Markdown では、そのクラスを利用して display: none; で表示を無効化しています。

クリック操作の内容も含めてエクスポートする

Slidev には作成したスライドを pdf などでエクスポートする機能が備わっています。
しかしスライドをデフォルトでエクスポートするとクリック等の操作を終えた最後の状態のスライドしかエクスポートされません。

デフォルトの実行例

yarn run slidev export 

そこでクリック操作も含んだ状態でエクスポートされるようにオプションを渡します。

オプションを渡した実行例

yarn run slidev export --with-clicks

npm を使用している場合

npm run export でエクスポートが可能です。
クリック操作も含めたい場合はpackage.json を編集します。

package.json (一部抜粋)

  "scripts": {
    "build": "slidev build",
    "dev": "slidev --open",
+   "export": "slidev export --with-clicks"
  }

この編集後に npm run export を行うとクリック操作も含まれたエクスポートが作成されます。

これですべての内容が含まれるスライドをエクスポートすることができました。
この記事が役に立ったら 🩷 を頂けると嬉しいです！

参考記事