"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{children:" {blogs.map((b, index) => ("})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{children:" "})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{children:" "})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{children:" "})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{children:" "})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{children:" "})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{children:" ))}"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{children:"

"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{children:" )"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{children:"}"})})]})})}),` `,(0,e.jsx)(n.h3,{id:"\u5909\u66F4\u70B9\u306E\u30DD\u30A4\u30F3\u30C8",children:"\u5909\u66F4\u70B9\u306E\u30DD\u30A4\u30F3\u30C8"}),` `,(0,e.jsxs)(n.ol,{children:[` `,(0,e.jsxs)(n.li,{children:[(0,e.jsxs)(n.strong,{children:[(0,e.jsx)(n.code,{children:"AnimatePresence"}),"\u3067\u30E9\u30C3\u30D7"]}),": ",(0,e.jsx)(n.code,{children:"map"}),"\u3067\u5C55\u958B\u3055\u308C\u308B\u30EA\u30B9\u30C8\u5168\u4F53\u3092",(0,e.jsx)(n.code,{children:""}),"\u3067\u56F2\u307F\u307E\u3059\u3002"]}),` `,(0,e.jsxs)(n.li,{children:[(0,e.jsxs)(n.strong,{children:[(0,e.jsx)(n.code,{children:"key"}),"\u304C\u5FC5\u9808"]}),": ",(0,e.jsx)(n.code,{children:"AnimatePresence"}),"\u306F\u3001\u5185\u90E8\u306E\u5404\u8981\u7D20\u304C\u30E6\u30CB\u30FC\u30AF\u306A",(0,e.jsx)(n.code,{children:"key"}),"\u3092\u6301\u3064\u3053\u3068\u3092\u8981\u6C42\u3057\u307E\u3059\u3002\u3053\u308C\u306B\u3088\u308A\u3001\u3069\u306E\u8981\u7D20\u304C\u8FFD\u52A0\u3055\u308C\u3001\u3069\u306E\u8981\u7D20\u304C\u524A\u9664\u3055\u308C\u305F\u306E\u304B\u3092\u6B63\u78BA\u306B\u8FFD\u8DE1\u3067\u304D\u307E\u3059\u3002"]}),` `,(0,e.jsxs)(n.li,{children:[(0,e.jsxs)(n.strong,{children:[(0,e.jsx)(n.code,{children:"whileInView"}),"\u304B\u3089",(0,e.jsx)(n.code,{children:"animate"}),"\u3078"]}),": \u30A2\u30CB\u30E1\u30FC\u30B7\u30E7\u30F3\u306E\u30C8\u30EA\u30AC\u30FC\u3092\u300C\u753B\u9762\u5185\u306B\u5165\u3063\u305F\u6642\u300D\u304B\u3089\u300C\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u304C\u30DE\u30A6\u30F3\u30C8\u3055\u308C\u305F\u6642\u300D\u306B\u5909\u66F4\u3057\u307E\u3059\u3002"]}),` `,(0,e.jsxs)(n.li,{children:[(0,e.jsxs)(n.strong,{children:[(0,e.jsx)(n.code,{children:"exit"}),"\u30D7\u30ED\u30D1\u30C6\u30A3\u306E\u8FFD\u52A0"]}),": \u3053\u308C\u304C\u6700\u3082\u91CD\u8981\u3067\u3059\u3002",(0,e.jsx)(n.code,{children:"exit"}),"\u306F\u3001\u8981\u7D20\u304C\u30C4\u30EA\u30FC\u304B\u3089\u524A\u9664\u3055\u308C\u308B\uFF08\uFF1D\u30AB\u30C6\u30B4\u30EA\u304C\u5207\u308A\u66FF\u308F\u3063\u3066\u53E4\u3044\u8A18\u4E8B\u30EA\u30B9\u30C8\u304C\u6D88\u3048\u308B\uFF09\u969B\u306B\u5B9F\u884C\u3055\u308C\u308B\u30A2\u30CB\u30E1\u30FC\u30B7\u30E7\u30F3\u3092\u5B9A\u7FA9\u3057\u307E\u3059\u3002\u3053\u308C\u306B\u3088\u308A\u3001\u53E4\u3044\u30EA\u30B9\u30C8\u304C\u30B9\u30E0\u30FC\u30BA\u306B\u6D88\u3048\u3001\u65B0\u3057\u3044\u30EA\u30B9\u30C8\u304C\u30B9\u30E0\u30FC\u30BA\u306B\u8868\u793A\u3055\u308C\u308B\u3088\u3046\u306B\u306A\u308A\u307E\u3059\u3002"]}),` `]}),` `,(0,e.jsx)(n.h2,{id:"\u307E\u3068\u3081",children:"\u307E\u3068\u3081"}),` `,(0,e.jsx)(n.p,{children:"Next.js\u306E\u52D5\u7684\u30DA\u30FC\u30B8\u3067Framer Motion\u306E\u3088\u3046\u306A\u30A2\u30CB\u30E1\u30FC\u30B7\u30E7\u30F3\u30E9\u30A4\u30D6\u30E9\u30EA\u3092\u4F7F\u7528\u3059\u308B\u969B\u306F\u3001\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u306E\u30E9\u30A4\u30D5\u30B5\u30A4\u30AF\u30EB\u3068\u30A2\u30CB\u30E1\u30FC\u30B7\u30E7\u30F3\u306E\u30C8\u30EA\u30AC\u30FC\u3092\u610F\u8B58\u3059\u308B\u3053\u3068\u304C\u975E\u5E38\u306B\u91CD\u8981\u3067\u3059\u3002"}),` `,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:"whileInView"}),"\u306F\u9759\u7684\u306A\u30DA\u30FC\u30B8\u3067\u306E\u30B9\u30AF\u30ED\u30FC\u30EB\u30A2\u30CB\u30E1\u30FC\u30B7\u30E7\u30F3\u306B\u306F\u4FBF\u5229\u3067\u3059\u304C\u3001\u4ECA\u56DE\u306E\u3088\u3046\u306B\u30D7\u30ED\u30D1\u30C6\u30A3\u306E\u5909\u66F4\u306B\u5FDC\u3058\u3066\u30EA\u30B9\u30C8\u304C\u52D5\u7684\u306B\u5909\u308F\u308B\u3088\u3046\u306A\u30B1\u30FC\u30B9\u3067\u306F\u3001",(0,e.jsx)(n.code,{children:"AnimatePresence"}),"\u3092\u4F7F\u3046\u306E\u304C\u6700\u3082\u78BA\u5B9F\u3067\u5BA3\u8A00\u7684\u306A\u89E3\u6C7A\u7B56\u3068\u8A00\u3048\u308B\u3067\u3057\u3087\u3046\u3002"]})]})}function o(i={}){let{wrapper:n}=i.components||{};return n?(0,e.jsx)(n,{...i,children:(0,e.jsx)(h,{...i})}):h(i)}return k(B);})(); ;return Component;

TECH BLOG

Category

#framer-motion

Next.js + Framer Motionで発生した再レンダリング時のアニメーション問題の解決策