ヘッドレスUIを使うとReactでアンマウント時のアニメーションを指定するのも簡単になる（場合もある）

Posted at 2024-12-22

この記事の概要

Reactを使っていて、アンマウント時にアニメーションをさせたくなったことはありませんか？
そして、経験がある方なら「実現したい内容の割に面倒」ということには賛同していただけると思っています。

自前で用意する場合
- アニメーションの制御やタイミング管理など、手間がかかる
- 通常のコンポーネントをアニメーション用の処理でラップする必要などがあり、メンテナンスの負荷が高い
ライブラリを使用する場合
- 「このためだけにライブラリを入れるの？」という感覚が拭えない¹
- ライブラリによるものの、バンドルサイズが増加する

しかしながら最近流行りのヘッドレスUIを使用すると、実は元からアニメーションのための機構が用意されていることも多いです。

マウント時にdata-entering、アンマウント時にdata-exitingというdata-属性が付与されます。

マウント時にdata-state="open"、アンマウント時にdata-state="closed"というdata-属性が付与されます。

注意するほどでもないですが、data-stateは"open" | "close"以外の値にもなり得ます。
例えばCheckboxでは同じdata-stateの名前で"checked" | "unchecked" | "indeterminate"という値になります。

マウント時にdata-state="open"、アンマウント時にdata-state="closed"というdata-属性が付与されます。

こちらもRadix UIと同様で、data-stateは"open" | "close"以外の値にもなり得ます。

マウント時にdata-starting-styleまたはdata-open、アンマウント時にdata-ending-styleまたはdata-closedというdata-属性が付与されます。

「または」と記載したのは、CSSトランジション用とCSSアニメーション用で付与される属性がわけられているからです。

特徴別にまとめると以下です。

役割・用途	マウント時	アンマウント時
CSSトランジション用途中でキャンセルができる	`data-starting-style`	`data-ending-style`
CSSアニメーション用途中でキャンセルができず、最後まで実行される	`data-open`	`data-closed`

紹介したすべてのライブラリにおいて、マウント時・アンマウント時の制御が入っているのは一部のコンポーネントだけです。

例えば以下のようなものです。

いずれも、ボタン押下などではじめて出現し、画面から消えるまでで1つの役割といったインターフェースです。

こういった要素に対してアニメーションをつけたくなり、ヘッドレスUIを使っている（あるいはこれからの使用を検討している）場合「UIライブラリ側がアニメーションの機構まで用意してくれているかもしれない」という気持ちで調べてみると良さそうです。

書き方は多少違いますが、どれも共通して「マウント時とアンマウント時にそれぞれdata-属性が付与される」というものなので、どれか1つを使ったことがあれば他にもすぐ移行できると思います。

逆に「AddボタンでToDoが増える、RemoveボタンでToDoが減る、その際のアニメーションをつけたい」といった要望であれば、元々備わっている機構では叶わないことが多いです。

この場合はライブラリを使うかアニメーションそのものを諦めるか、といった判断になるとは思います。
「手軽にアニメーションできる方法」に対する無いものねだり（？）をせずに済み、判断の変数を減らせると言えば減らせそうです。

銀の弾丸ではないですが「どこまでなら簡単にできる、どこからは覚悟を持つ必要がある」と分かるだけでも少しはメリットがあるかと思います。

かなり感覚的な話ではありますが……経験上、あまり深く考えていない人がライブラリを入れたプロジェクトに後から参加した際、ライブラリが辛さのネックの1つになっていたことは多いです。もっとも、ライブラリ全般に言えることで、アニメーション系のライブラリに限った話ではないのかもしれませんが。 ↩