スタイルを自由に設定でき、かつアクセシブルなUIライブラリ、Headless UIを紹介するシリーズです。普段Webアプリケーションでよく見かけるようなUIに、好きな方法でスタイルを当てることができます。
第2回で作成したDropdown Menuにアニメーションをつけていきます。Headless UIはアニメーションの部分だけがTransitionコンポーネントとして分離されているので、Menuコンポーネント自体は、シンプルな設計を維持することができます。
前回作成したDropdown Menuにアニメーションをつけたいのですが、Dropdown Menuのコンポーネント自体にはアニメーションの機能はありません。アニメーションだけを実現するTransitionコンポーネントを利用します。
Headless UIのDropdown Menuを使って、メニューのUIを作ってみます。メニューを開いたら画面を半透明黒で覆うオーバーレイを出し、選択しているメニューをハイライトさせるところまでを実装してみましょう。
自由に好きな方法でスタイルを当てることができ、なおかつアクセシブルなUIライブラリである、Headless UIを紹介します。まずはその特徴をつかんでみましょう。