メニューをチェックメニューからステートリストで書き直した
動機
伸縮可能なメニューリストを作りたかった。 ちょうどRecoilを導入したタイミングだったのでバケツリレーにならなくてちょうどよかった。
チェックメニューの問題点 → 発火の管理ができない
ステートで書く方も問題点があってDOMとしての要素を持たないためリストの展開のような挙動ができないため工夫する必要がある。 また親要素にrelativeを渡さないと中間展開できない。
参考にさせてもらったサイト。
ドロップダウンが一瞬消える残像のアニメーションがカッコ良すぎてやってみたくなった。
一応レスポンシブじゃなければ見えない領域でありますがどういう仕組みでアニメーションしてるのかとても気になりました。
transition-timing-functionを使ってMenu list中のliをdisplay: noneしてやれば簡単に再現できた。 Chakraに一定のアニメーショが内蔵されてるのだろうか？
とりあえずRecoilStateで書き換えたので閉じたらリセットが走るようになった。 副産物としてリスト３をscaleY(0)で上記関数でトグルさせるようにtransitionすると紙をパタパタしてるように見えるものが再現できた。
MITライセンスとはいえ完全に寄せるのは良くないので自分のオリジナリティを残して完結できるようにデザインもがんばりたい。
ちなみにこの方はマークダウンエディタの開発者でありApp Developerをしている。 開発を近くに置いてる人は常にデザイナーとしてもすごいなと思う次第でした。