kikiki-kiki https://blog.hatena.ne.jp/kikiki-kiki/ かもメモ https://chaika.hatenablog.com/ React TypeScript JavaScript React で Modal や Drawer で作る時に state の変更で表示 / 非表示を切り替えるとパッ出たり消えたりするので UX 的に美しくないからアニメーションをさせたい。 chakra UI のような出来上がっている UI ライブラリ無しで実装してみたのでメモ (chakra UI使うと楽なのだが) Framer Motion を使う animation を時前で実装すると CSS アニメーションを待つタイマーとかいろいろと状態を作らないと大変そうだし、メンテコストも高そうだったのでライブラリを使うことにした。車輪の再発明をしてる暇はなかった。 Rect で使える animat… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fchaika.hatenablog.com%2Fentry%2F2024%2F06%2F10%2F080000" title="React Framer Motion を使ってふわっと出てくるモーダルやメニューを作る - かもメモ" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://m.media-amazon.com/images/I/51JVnr1FAbL._SL500_.jpg Hatena Blog https://hatena.blog 2024-06-10 08:00:00 rich https://chaika.hatenablog.com/entry/2024/06/10/080000 1.0 100%