下記のようなアニメーションを実現したい
https://nextui.org/docs/components/tabsこの機能を実装するにあたって
を知りたいです.
基本的な css animation は把握しています
質問に提示されているのは、出典の Usage セクションにあるサンプルですか？ それの中の項目をクリックすると、その項目がハイライトされるが、それをどうやっているか知りたいということですか？
@tomatommy
Questioner
そうです！仕組みを知りたいです
項目クリックで html (DOM) がどのように書き換えられるか開発者ツールで見てみました。下の画像を見てください。
クリックして選択項目が変わると、NextUI ライブラリのスクリプトが動いて DOM が書き換えられ（その項目の button 要素の area-selected 属性が true に変わる、data-selected="true" 属性が追加される、span 要素が追加されるなど）、その結果に応じてハイライトされるようです。
しかし、NextUI ライブラリのスクリプトがどのように DOM を書き換えているのか、書き換えた結果の何がハイライトに影響しているのかの詳しい仕組みまでは分かりません。
それを調べるには NextUI ライブラリのソースコードを入手して解析するといったことが必要ではないかと思いますが、とてもそこまでやる気力は自分にはないです。
そういう情報が必要ということですと、自分はお役に立てないです。他の方の回答をお待ちください。
@oura-hideyoshi さん
こんにちは。NextUI ライブラリでの仕組みはわかりませんが、バニラJSでよろしければ作ってみました（意図したものと違っていたら申し訳ありません）
See the Pen CurrentListsSelect by benjuwan (@benjuwan) on CodePen.
仕組みとしては、
1：選択されているリスト要素に任意の属性を付与
2：各リストのクリック処理で、上記任意の属性の移行（クリックしたリストには付与、直前まで選択中だったリストからは削除を行う）
3：アニメーションはCSSのtransformとtransitionで行う
2の「上記任意の属性の移行」に関しての補足として、直前まで選択中だったリストのインデックス番号を取得して、クリックしたリストのインデックス番号と比較し、その差分で付与する class を区別しています。
PS：拙速で作りが荒い部分もあるかと思いますがご容赦ください。
@tomatommy
Questioner
なるほど、 NextUI - Tabs のようなコンポーネントを実装するにあたり、参考になるとっかかりになります！
これに関しては自分で考えてみたいとおもいます
ありがとうございます！
