{"categories":["React","TypeScript","JavaScript"],"published":"2024-06-10 08:00:00","width":"100%","title":"React Framer Motion \u3092\u4f7f\u3063\u3066\u3075\u308f\u3063\u3068\u51fa\u3066\u304f\u308b\u30e2\u30fc\u30c0\u30eb\u3084\u30e1\u30cb\u30e5\u30fc\u3092\u4f5c\u308b","url":"https://chaika.hatenablog.com/entry/2024/06/10/080000","author_name":"kikiki-kiki","version":"1.0","provider_name":"Hatena Blog","blog_url":"https://chaika.hatenablog.com/","blog_title":"\u304b\u3082\u30e1\u30e2","html":"<iframe src=\"https://hatenablog-parts.com/embed?url=https%3A%2F%2Fchaika.hatenablog.com%2Fentry%2F2024%2F06%2F10%2F080000\" title=\"React Framer Motion \u3092\u4f7f\u3063\u3066\u3075\u308f\u3063\u3068\u51fa\u3066\u304f\u308b\u30e2\u30fc\u30c0\u30eb\u3084\u30e1\u30cb\u30e5\u30fc\u3092\u4f5c\u308b - \u304b\u3082\u30e1\u30e2\" class=\"embed-card embed-blogcard\" scrolling=\"no\" frameborder=\"0\" style=\"display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;\"></iframe>","description":"React \u3067 Modal \u3084 Drawer \u3067\u4f5c\u308b\u6642\u306b state \u306e\u5909\u66f4\u3067\u8868\u793a / \u975e\u8868\u793a\u3092\u5207\u308a\u66ff\u3048\u308b\u3068\u30d1\u30c3\u51fa\u305f\u308a\u6d88\u3048\u305f\u308a\u3059\u308b\u306e\u3067 UX \u7684\u306b\u7f8e\u3057\u304f\u306a\u3044\u304b\u3089\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u3055\u305b\u305f\u3044\u3002 chakra UI \u306e\u3088\u3046\u306a\u51fa\u6765\u4e0a\u304c\u3063\u3066\u3044\u308b UI \u30e9\u30a4\u30d6\u30e9\u30ea\u7121\u3057\u3067\u5b9f\u88c5\u3057\u3066\u307f\u305f\u306e\u3067\u30e1\u30e2 (chakra UI\u4f7f\u3046\u3068\u697d\u306a\u306e\u3060\u304c) Framer Motion \u3092\u4f7f\u3046 animation \u3092\u6642\u524d\u3067\u5b9f\u88c5\u3059\u308b\u3068 CSS \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u5f85\u3064\u30bf\u30a4\u30de\u30fc\u3068\u304b\u3044\u308d\u3044\u308d\u3068\u72b6\u614b\u3092\u4f5c\u3089\u306a\u3044\u3068\u5927\u5909\u305d\u3046\u3060\u3057\u3001\u30e1\u30f3\u30c6\u30b3\u30b9\u30c8\u3082\u9ad8\u305d\u3046\u3060\u3063\u305f\u306e\u3067\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u3046\u3053\u3068\u306b\u3057\u305f\u3002\u8eca\u8f2a\u306e\u518d\u767a\u660e\u3092\u3057\u3066\u308b\u6687\u306f\u306a\u304b\u3063\u305f\u3002 Rect \u3067\u4f7f\u3048\u308b animat\u2026","author_url":"https://blog.hatena.ne.jp/kikiki-kiki/","provider_url":"https://hatena.blog","height":"190","image_url":"https://m.media-amazon.com/images/I/51JVnr1FAbL._SL500_.jpg","type":"rich"}