{"id":9610,"date":"2026-03-19T15:32:07","date_gmt":"2026-03-19T06:32:07","guid":{"rendered":"https:\/\/fastcoding.jp\/blog\/?p=9610"},"modified":"2026-03-19T15:32:15","modified_gmt":"2026-03-19T06:32:15","slug":"flip-animation-react-vue-60fps","status":"publish","type":"post","link":"https:\/\/fastcoding.jp\/blog\/all\/frontend\/flip-animation-react-vue-60fps\/","title":{"rendered":"“\u52d5\u304b\u3059\u3051\u3069\u8efd\u3044” FLIP\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u8a2d\u8a08 \u2500 React\/Vue\u306760fps\u3092\u7dad\u6301\u3059\u308b\u5b9f\u88c5\u6cd5"},"content":{"rendered":"
\n

\u3053\u3093\u306b\u3061\u306f\u3001\u682a\u5f0f\u4f1a\u793e\u30d5\u30a1\u30b9\u30c8\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u306e\u30d5\u30eb\u30b9\u30bf\u30c3\u30af\u30a8\u30f3\u30b8\u30cb\u30a2\u3001\u72ec\u8eab\u8cb4\u65cfFire\u3067\u3059\u3002<\/p>\n\n\n\n

\u5148\u65e5\u3001\u4f11\u65e5\u306b\u30d0\u30a4\u30af\u3067\u3044\u3064\u3082\u3068\u9055\u3046\u30eb\u30fc\u30c8\u3092\u8d70\u3063\u3066\u307f\u305f\u3093\u3067\u3059\u3002\u30ca\u30d3\u3092\u898b\u306a\u304c\u3089\u4ea4\u5dee\u70b9\u3067\u53f3\u6298\u3059\u308b\u304b\u5de6\u6298\u3059\u308b\u304b\u5224\u65ad\u3059\u308b\u3068\u304d\u3001\u5730\u56f3\u4e0a\u306e\u30d4\u30f3\u304c\u30b9\u30c3\u3068\u79fb\u52d5\u3057\u3066\u304f\u308c\u308b\u3068\u6b21\u306e\u30a2\u30af\u30b7\u30e7\u30f3\u304c\u76f4\u611f\u7684\u306b\u308f\u304b\u308b\u3002\u3068\u3053\u308d\u304c\u53e4\u3044\u30ca\u30d3\u30a2\u30d7\u30ea\u3060\u3068\u3001\u30d4\u30f3\u304c\u4e00\u77ac\u6d88\u3048\u3066\u5225\u306e\u5834\u6240\u306b\u30d1\u30c3\u3068\u73fe\u308c\u308b\u3002\u305f\u3063\u305f\u305d\u308c\u3060\u3051\u306e\u9055\u3044\u3067\u3001\u8d70\u884c\u4e2d\u306e\u5b89\u5fc3\u611f\u304c\u307e\u308b\u3067\u5909\u308f\u308a\u307e\u3059\u3002<\/p>\n\n\n\n

\u2026\u2026\u30d0\u30a4\u30af\u306e\u30ca\u30d3\u306f\u30b9\u30de\u30db\u30db\u30eb\u30c0\u30fc\u306b\u4ed8\u3051\u305fiPhone\u306a\u3093\u3067\u3059\u304c\u3001\u632f\u52d5\u3067\u753b\u9762\u304c\u63fa\u308c\u308b\u306e\u3067\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3069\u3053\u308d\u3058\u3083\u306a\u3044\u3068\u304d\u3082\u3042\u308a\u307e\u3059\u3002<\/small><\/p>\n\n\n\n

Web UI\u3067\u3082\u540c\u3058\u3053\u3068\u304c\u8a00\u3048\u307e\u3059\u3002\u30ab\u30fc\u30c9\u306e\u4e26\u3073\u66ff\u3048\u3001\u30d5\u30a3\u30eb\u30bf\u5f8c\u306e\u30ea\u30b9\u30c8\u518d\u914d\u7f6e\u3001\u30c9\u30e9\u30c3\u30b0\uff06\u30c9\u30ed\u30c3\u30d7\u2014\u2014\u8981\u7d20\u306e\u4f4d\u7f6e\u304c\u5909\u308f\u308bUI\u306f\u591a\u3044\u306e\u306b\u3001\u300c\u30d1\u30c3\u3068\u6d88\u3048\u3066\u30d1\u30c3\u3068\u51fa\u308b\u300d\u5b9f\u88c5\u306b\u306a\u3063\u3066\u3044\u308b\u30b1\u30fc\u30b9\u306f\u73cd\u3057\u304f\u3042\u308a\u307e\u305b\u3093\u3002\u52d5\u304d\u3092\u4ed8\u3051\u308c\u3070\u4f53\u611f\u306f\u826f\u304f\u306a\u308b\u3002\u3057\u304b\u3057\u5b89\u6613\u306b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u5165\u308c\u308b\u3068\u3001\u30d0\u30f3\u30c9\u30eb\u30b5\u30a4\u30ba\u304c\u81a8\u3089\u307f\u3001\u8981\u7d20\u6570\u304c\u5897\u3048\u305f\u3068\u304d\u306b\u30d5\u30ec\u30fc\u30e0\u843d\u3061\u304c\u8d77\u304d\u307e\u3059\u3002<\/p>\n\n\n\n

\u305d\u3053\u3067\u6709\u52b9\u306a\u306e\u304cFLIP\uff08First, Last, Invert, Play\uff09\u3068\u3044\u3046\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u8a2d\u8a08\u624b\u6cd5\u3067\u3059\u3002\u5916\u90e8\u30e9\u30a4\u30d6\u30e9\u30ea\u306a\u3057\u306760fps\u3092\u7dad\u6301\u3057\u306a\u304c\u3089\u3001\u8981\u7d20\u306e\u4f4d\u7f6e\u5909\u5316\u3092\u6ed1\u3089\u304b\u306b\u898b\u305b\u3089\u308c\u307e\u3059\u3002\u4eca\u56de\u306fFLIP\u306e\u8003\u3048\u65b9\u3068\u3001React\u304a\u3088\u3073Vue\u3067\u306e\u5b9f\u88c5\u65b9\u6cd5\u3092\u6574\u7406\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

FLIP\u3068\u306f\u4f55\u304b\u2014\u20144\u30b9\u30c6\u30c3\u30d7\u3067\u7406\u89e3\u3059\u308b<\/h2>\n\n\n\n

FLIP\u306fGoogle\u306ePaul Lewis\u304c\u63d0\u5531\u3057\u305f\u624b\u6cd5\u3067\u3001\u540d\u524d\u306e\u901a\u308a4\u3064\u306e\u30b9\u30c6\u30c3\u30d7\u3067\u69cb\u6210\u3055\u308c\u307e\u3059\u3002\u8003\u3048\u65b9\u81ea\u4f53\u306f\u30b7\u30f3\u30d7\u30eb\u3067\u3059\u3002<\/p>\n\n\n\n

    \n
  • First<\/strong>\uff1a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u524d\u306e\u8981\u7d20\u306e\u4f4d\u7f6e\u30fb\u30b5\u30a4\u30ba\u3092getBoundingClientRect()<\/code>\u3067\u8a18\u9332\u3059\u308b<\/li>\n
  • Last<\/strong>\uff1aDOM\u3092\u66f4\u65b0\u3057\u3001\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u5f8c\u306e\u4f4d\u7f6e\u30fb\u30b5\u30a4\u30ba\u3092\u540c\u69d8\u306b\u8a18\u9332\u3059\u308b<\/li>\n
  • Invert<\/strong>\uff1aLast\u3068First\u306e\u5dee\u5206\u3092\u8a08\u7b97\u3057\u3001transform<\/code>\u3067\u300c\u5143\u306e\u4f4d\u7f6e\u306b\u898b\u3048\u308b\u3088\u3046\u300d\u305a\u3089\u3059<\/li>\n
  • Play<\/strong>\uff1atransform<\/code>\u30920\u306b\u623b\u3059\u30c8\u30e9\u30f3\u30b8\u30b7\u30e7\u30f3\u3092\u5b9f\u884c\u3057\u3001\u8981\u7d20\u304c\u65b0\u3057\u3044\u4f4d\u7f6e\u3078\u6ed1\u3089\u304b\u306b\u79fb\u52d5\u3059\u308b<\/li>\n<\/ul>\n\n\n\n

    \u30dd\u30a4\u30f3\u30c8\u306f\u3001top<\/code>\u3084left<\/code>\u3067\u306f\u306a\u304ftransform<\/code>\u3060\u3051\u3067\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3057\u3066\u3044\u308b\u70b9\u3067\u3059\u3002transform<\/code>\u306f\u30ec\u30a4\u30a2\u30a6\u30c8\u518d\u8a08\u7b97\u3092\u5f15\u304d\u8d77\u3053\u3055\u305a\u3001GPU\u3067\u5408\u6210\u51e6\u7406\u3055\u308c\u308b\u305f\u3081\u3001\u8981\u7d20\u6570\u304c\u591a\u304f\u3066\u3082\u63cf\u753b\u30b3\u30b9\u30c8\u304c\u4f4e\u304f\u6291\u3048\u3089\u308c\u307e\u3059\u3002MDN\u306e\u300cCSS \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u300d\u3067\u3082\u3001transform<\/code>\u3068opacity<\/code>\u306f\u30ec\u30a4\u30a2\u30a6\u30c8\u3084\u30da\u30a4\u30f3\u30c8\u3092\u30c8\u30ea\u30ac\u30fc\u3057\u306a\u3044\u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u3057\u3066\u63a8\u5968\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n

    \u306a\u305ctop\/left\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3067\u306f\u8db3\u308a\u306a\u3044\u306e\u304b<\/h2>\n\n\n\n

    \u8981\u7d20\u306e\u4f4d\u7f6e\u3092\u52d5\u304b\u3059\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3067\u3001\u6700\u3082\u3084\u308a\u304c\u3061\u306a\u5931\u6557\u304ctop<\/code>\/left<\/code>\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u76f4\u63a5\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3067\u3059\u3002<\/p>\n\n\n\n

    \u79c1\u305f\u3061\u306e\u958b\u767a\u73fe\u5834\u3067\u3082\u3001\u3042\u308bEC\u30b5\u30a4\u30c8\u306e\u5546\u54c1\u4e00\u89a7\u30da\u30fc\u30b8\u3067\u300c\u304a\u6c17\u306b\u5165\u308a\u9806\u306b\u4e26\u3073\u66ff\u3048\u300d\u6a5f\u80fd\u3092\u5b9f\u88c5\u3057\u305f\u969b\u306b\u3053\u306e\u554f\u984c\u306b\u76f4\u9762\u3057\u307e\u3057\u305f\u3002200\u4ef6\u4ee5\u4e0a\u306e\u30ab\u30fc\u30c9\u3092position: absolute<\/code>\uff0btop<\/code>\/left<\/code>\u3067\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3055\u305b\u305f\u3068\u3053\u308d\u3001\u4e26\u3073\u66ff\u3048\u306e\u305f\u3073\u306b\u30d5\u30ec\u30fc\u30e0\u30ec\u30fc\u30c8\u304c15fps\u524d\u5f8c\u307e\u3067\u843d\u3061\u8fbc\u3093\u3060\u306e\u3067\u3059\u3002<\/p>\n\n\n\n

    \u539f\u56e0\u306f\u660e\u78ba\u3067\u3057\u305f\u3002top<\/code>\/left<\/code>\u306e\u5909\u66f4\u306f\u30d6\u30e9\u30a6\u30b6\u306e\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u3067\u300c\u30ec\u30a4\u30a2\u30a6\u30c8\u2192\u30da\u30a4\u30f3\u30c8\u2192\u5408\u6210\u300d\u306e\u5168\u5de5\u7a0b\u3092\u6bce\u30d5\u30ec\u30fc\u30e0\u518d\u5b9f\u884c\u3055\u305b\u307e\u3059\u3002\u8981\u7d20\u304c200\u4ef6\u3042\u308c\u3070\u3001\u6bce\u30d5\u30ec\u30fc\u30e0200\u56de\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u518d\u8a08\u7b97\u304c\u8d70\u308b\u3002Chrome DevTools\u306ePerformance\u30d1\u30cd\u30eb\u3067\u78ba\u8a8d\u3059\u308b\u3068\u3001Layout\u5de5\u7a0b\u3060\u3051\u30671\u30d5\u30ec\u30fc\u30e0\u3042\u305f\u308a40ms\u4ee5\u4e0a\u304b\u304b\u3063\u3066\u3044\u307e\u3057\u305f\u300216ms\u4ee5\u5185\u306b\u53ce\u3081\u306a\u3051\u308c\u307060fps\u306f\u7dad\u6301\u3067\u304d\u307e\u305b\u3093\u3002<\/p>\n\n\n\n

    FLIP\u3067transform<\/code>\u306b\u5207\u308a\u66ff\u3048\u305f\u7d50\u679c\u3001\u540c\u3058200\u4ef6\u306e\u30ab\u30fc\u30c9\u3067\u3082\u30d5\u30ec\u30fc\u30e0\u6642\u9593\u306f8\u301c12ms\u306b\u53ce\u307e\u308a\u300160fps\u3092\u5b89\u5b9a\u3057\u3066\u7dad\u6301\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n\n\n\n

    FLIP\u306e\u57fa\u672c\u5b9f\u88c5\u2014\u2014Vanilla JavaScript\u7248<\/h2>\n\n\n\n

    \u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306b\u4f9d\u5b58\u3057\u306a\u3044\u7d20\u306eJavaScript\u3067\u3001FLIP\u306e\u52d5\u304d\u3092\u78ba\u8a8d\u3057\u307e\u3057\u3087\u3046\u3002\u307e\u305a\u306f\u3053\u306e\u57fa\u672c\u5f62\u3092\u7406\u89e3\u3057\u3066\u304a\u304f\u3068\u3001React\u3084Vue\u3078\u306e\u5fdc\u7528\u304c\u30b9\u30e0\u30fc\u30ba\u3067\u3059\u3002<\/p>\n\n\n\n

    \/\/ FLIP\u57fa\u672c\u5b9f\u88c5\nfunction flipAnimate(element, updateFn) {\n  \/\/ 1. First: \u73fe\u5728\u306e\u4f4d\u7f6e\u3092\u8a18\u9332\n  const first = element.getBoundingClientRect();\n\n  \/\/ 2. Last: DOM\u3092\u66f4\u65b0\uff08\u4e26\u3073\u66ff\u3048\u306a\u3069\uff09\n  updateFn();\n  const last = element.getBoundingClientRect();\n\n  \/\/ 3. Invert: \u5dee\u5206\u3092transform\u3067\u6253\u3061\u6d88\u3059\n  const deltaX = first.left - last.left;\n  const deltaY = first.top - last.top;\n\n  element.style.transform = `translate(${deltaX}px, ${deltaY}px)`;\n  element.style.transition = 'none';\n\n  \/\/ 4. Play: \u6b21\u30d5\u30ec\u30fc\u30e0\u3067transform\u3092\u89e3\u9664\u3057\u3001\u30c8\u30e9\u30f3\u30b8\u30b7\u30e7\u30f3\u5b9f\u884c\n  requestAnimationFrame(() => {\n    requestAnimationFrame(() => {\n      element.style.transition = 'transform 0.3s ease';\n      element.style.transform = '';\n\n      \/\/ \u30af\u30ea\u30fc\u30f3\u30a2\u30c3\u30d7\n      element.addEventListener('transitionend', () => {\n        element.style.transition = '';\n      }, { once: true });\n    });\n  });\n}<\/code><\/pre>\n\n\n\n
    requestAnimationFrame<\/code>\u30922\u91cd\u306b\u30cd\u30b9\u30c8\u3057\u3066\u3044\u308b\u306e\u306f\u3001\u30d6\u30e9\u30a6\u30b6\u304cInvert\u306e\u72b6\u614b\u3092\u78ba\u5b9f\u306b\u63cf\u753b\u3057\u3066\u304b\u3089Play\u306b\u79fb\u884c\u3059\u308b\u305f\u3081\u3067\u3059\u30021\u91cd\u3060\u3068\u30d6\u30e9\u30a6\u30b6\u306e\u6700\u9069\u5316\u306b\u3088\u308aInvert\u3068Play\u304c\u540c\u30d5\u30ec\u30fc\u30e0\u3067\u51e6\u7406\u3055\u308c\u3001\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u304c\u898b\u3048\u306a\u3044\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
    \u8907\u6570\u8981\u7d20\u3092\u4e00\u62ec\u3067FLIP\u3055\u305b\u308b<\/h3>\n\n\n\n
    \u5b9f\u969b\u306e\u30d7\u30ed\u30c0\u30af\u30c8\u3067\u306f\u30ab\u30fc\u30c9\u4e00\u89a7\u306e\u3088\u3046\u306b\u8907\u6570\u8981\u7d20\u3092\u540c\u6642\u306b\u52d5\u304b\u3057\u307e\u3059\u3002\u5404\u8981\u7d20\u306erect\u3092\u4e00\u62ec\u53d6\u5f97\u3057\u3066\u304b\u3089DOM\u3092\u66f4\u65b0\u3057\u3001\u4e00\u62ec\u3067Invert\u2192Play\u3059\u308b\u6d41\u308c\u3067\u3059\u3002<\/p>\n\n\n\n
    function flipAnimateAll(container, updateFn) {\n  const children = Array.from(container.children);\n\n  \/\/ First: \u5168\u8981\u7d20\u306e\u4f4d\u7f6e\u3092\u8a18\u9332\n  const firstRects = new Map();\n  children.forEach(child => {\n    firstRects.set(child, child.getBoundingClientRect());\n  });\n\n  \/\/ Last: DOM\u66f4\u65b0\n  updateFn();\n\n  \/\/ Invert + Play\n  children.forEach(child => {\n    const first = firstRects.get(child);\n    if (!first) return;\n    const last = child.getBoundingClientRect();\n    const deltaX = first.left - last.left;\n    const deltaY = first.top - last.top;\n\n    if (deltaX === 0 && deltaY === 0) return;\n\n    child.style.transform = `translate(${deltaX}px, ${deltaY}px)`;\n    child.style.transition = 'none';\n    child.style.willChange = 'transform';\n  });\n\n  requestAnimationFrame(() => {\n    requestAnimationFrame(() => {\n      children.forEach(child => {\n        child.style.transition = 'transform 0.3s ease';\n        child.style.transform = '';\n        child.addEventListener('transitionend', () => {\n          child.style.transition = '';\n          child.style.willChange = '';\n        }, { once: true });\n      });\n    });\n  });\n}<\/code><\/pre>\n\n\n\n
    React\u5b9f\u88c5\uff1auseLayoutEffect + key\u7ba1\u7406<\/h2>\n\n\n\n
    React\u3067FLIP\u3092\u5b9f\u88c5\u3059\u308b\u5834\u5408\u3001useLayoutEffect<\/code>\u304c\u8981\u306b\u306a\u308a\u307e\u3059\u3002\u3053\u306e\u30d5\u30c3\u30af\u306fDOM\u306e\u66f4\u65b0\u5f8c\u3001\u30d6\u30e9\u30a6\u30b6\u304c\u753b\u9762\u3092\u63cf\u753b\u3059\u308b\u524d\u306b\u5b9f\u884c\u3055\u308c\u308b\u305f\u3081\u3001Invert\u306e\u30bf\u30a4\u30df\u30f3\u30b0\u3092FLIP\u306e\u8981\u4ef6\u3069\u304a\u308a\u306b\u5236\u5fa1\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
    \u4ee5\u4e0b\u306f\u30ab\u30fc\u30c9\u4e26\u3073\u66ff\u3048\u306e\u5b9f\u88c5\u4f8b\u3067\u3059\u3002\u306a\u304a\u3001\u672c\u8a18\u4e8b\u306eJSX\u30b3\u30fc\u30c9\u4f8b\u306fReact 18\u4ee5\u964d\u3092\u524d\u63d0\u3068\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
    \/\/ hooks\/useFlip.ts\nimport { useRef, useLayoutEffect, useCallback } from 'react';\n\ntype Rect = { left: number; top: number };\n\nexport function useFlip(deps: unknown[]) {\n  const rectsRef = useRef<Map<string, Rect>>(new Map());\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const capturePositions = useCallback(() => {\n    if (!containerRef.current) return;\n    const map = new Map<string, Rect>();\n    Array.from(containerRef.current.children).forEach((child) => {\n      const key = (child as HTMLElement).dataset.flipKey;\n      if (key) {\n        const rect = child.getBoundingClientRect();\n        map.set(key, { left: rect.left, top: rect.top });\n      }\n    });\n    rectsRef.current = map;\n  }, []);\n\n  useLayoutEffect(() => {\n    if (!containerRef.current) return;\n    const prevRects = rectsRef.current;\n\n    Array.from(containerRef.current.children).forEach((child) => {\n      const el = child as HTMLElement;\n      const key = el.dataset.flipKey;\n      if (!key) return;\n\n      const prev = prevRects.get(key);\n      if (!prev) return;\n\n      const curr = el.getBoundingClientRect();\n      const deltaX = prev.left - curr.left;\n      const deltaY = prev.top - curr.top;\n\n      if (deltaX === 0 && deltaY === 0) return;\n\n      el.style.transform = `translate(${deltaX}px, ${deltaY}px)`;\n      el.style.transition = 'none';\n\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          el.style.transition = 'transform 0.3s ease';\n          el.style.transform = '';\n          el.addEventListener('transitionend', () => {\n            el.style.transition = '';\n          }, { once: true });\n        });\n      });\n    });\n  }, deps);\n\n  return { containerRef, capturePositions };\n}<\/code><\/pre>\n\n\n\n
    \u3053\u306e\u30ab\u30b9\u30bf\u30e0\u30d5\u30c3\u30af\u3092\u4f7f\u3063\u305f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u6b21\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
    \/\/ components\/SortableCards.tsx\nimport { useState } from 'react';\nimport { useFlip } from '..\/hooks\/useFlip';\n\ntype Card = { id: string; title: string; order: number };\n\nexport function SortableCards({ initialCards }: { initialCards: Card[] }) {\n  const [cards, setCards] = useState(initialCards);\n  const { containerRef, capturePositions } = useFlip([cards]);\n\n  const shuffleCards = () => {\n    capturePositions();\n    setCards(prev => [...prev].sort(() => Math.random() - 0.5));\n  };\n\n  const sortByOrder = () => {\n    capturePositions();\n    setCards(prev => [...prev].sort((a, b) => a.order - b.order));\n  };\n\n  return (\n    <div>\n      <button onClick={shuffleCards}>\u30b7\u30e3\u30c3\u30d5\u30eb<\/button>\n      <button onClick={sortByOrder}>\u9806\u756a\u306b\u4e26\u3079\u308b<\/button>\n      <div\n        ref={containerRef}\n        style={{\n          display: 'grid',\n          gridTemplateColumns: 'repeat(3, 1fr)',\n          gap: '16px',\n          contain: 'layout',\n        }}\n      >\n        {cards.map(card => (\n          <div\n            key={card.id}\n            data-flip-key={card.id}\n            style={{\n              padding: '24px',\n              background: '#f3f4f6',\n              borderRadius: '8px',\n            }}\n          >\n            {card.title}\n          <\/div>\n        ))}\n      <\/div>\n    <\/div>\n  );\n}<\/code><\/pre>\n\n\n\n
    React\u3067\u6ce8\u610f\u3059\u3079\u304d\u70b9\u306fkey<\/code>\u306e\u7ba1\u7406\u3067\u3059\u3002key<\/code>\u304c\u5909\u308f\u308b\u3068React\u306fDOM\u8981\u7d20\u3092\u7834\u68c4\u3057\u3066\u518d\u751f\u6210\u3059\u308b\u305f\u3081\u3001FLIP\u306b\u5fc5\u8981\u306a\u300c\u540c\u3058DOM\u8981\u7d20\u306e\u4f4d\u7f6e\u6bd4\u8f03\u300d\u304c\u3067\u304d\u306a\u304f\u306a\u308a\u307e\u3059\u3002\u4e26\u3073\u66ff\u3048\u524d\u5f8c\u3067\u540c\u4e00\u306eID\u3092key<\/code>\u306b\u6e21\u3059\u3053\u3068\u3067\u3001React\u304c\u8981\u7d20\u3092\u518d\u5229\u7528\u3057\u3001FLIP\u304c\u6b63\u3057\u304f\u52d5\u4f5c\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
    Vue\u5b9f\u88c5\uff1aTransitionGroup\u306e\u6700\u9069\u5316<\/h2>\n\n\n\n
    Vue\u306b\u306fFLIP\u3092\u5185\u90e8\u7684\u306b\u4f7f\u3063\u305f<TransitionGroup><\/code>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u6a19\u6e96\u3067\u7528\u610f\u3055\u308c\u3066\u3044\u307e\u3059\u3002move-class<\/code>\u3092\u6307\u5b9a\u3059\u308b\u3060\u3051\u3067\u3001\u8981\u7d20\u306e\u4e26\u3073\u66ff\u3048\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u5b9f\u73fe\u3067\u304d\u307e\u3059\u3002Vue\u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306e\u300cTransitionGroup\u300d\u30bb\u30af\u30b7\u30e7\u30f3\u306b\u8a73\u3057\u3044\u89e3\u8aac\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
    <!-- components\/SortableCards.vue -->\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\n\ntype Card = { id: string; title: string; order: number };\n\nconst props = defineProps<{ initialCards: Card[] }>();\nconst cards = ref([...props.initialCards]);\n\nfunction shuffleCards() {\n  cards.value = [...cards.value].sort(() => Math.random() - 0.5);\n}\n\nfunction sortByOrder() {\n  cards.value = [...cards.value].sort((a, b) => a.order - b.order);\n}\n<\/script>\n\n<template>\n  <div>\n    <button @click=\"shuffleCards\">\u30b7\u30e3\u30c3\u30d5\u30eb<\/button>\n    <button @click=\"sortByOrder\">\u9806\u756a\u306b\u4e26\u3079\u308b<\/button>\n    <TransitionGroup\n      name=\"flip-list\"\n      tag=\"div\"\n      class=\"card-grid\"\n    >\n      <div\n        v-for=\"card in cards\"\n        :key=\"card.id\"\n        class=\"card\"\n      >\n        {{ card.title }}\n      <\/div>\n    <\/TransitionGroup>\n  <\/div>\n<\/template>\n\n<style scoped>\n.card-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 16px;\n  contain: layout;\n}\n\n.card {\n  padding: 24px;\n  background: #f3f4f6;\n  border-radius: 8px;\n}\n\n.flip-list-move {\n  transition: transform 0.3s ease;\n}\n\n.flip-list-leave-active {\n  position: absolute;\n  opacity: 0;\n}\n<\/style><\/code><\/pre>\n\n\n\n
    Vue\u306e\u5834\u5408\u3001.flip-list-move<\/code>\u30af\u30e9\u30b9\u3092\u5b9a\u7fa9\u3059\u308b\u3060\u3051\u3067FLIP\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u304c\u6709\u52b9\u306b\u306a\u308a\u307e\u3059\u3002\u5185\u90e8\u7684\u306b\u306fVue\u304cgetBoundingClientRect()<\/code>\u3067\u5dee\u5206\u3092\u8a08\u7b97\u3057\u3001transform<\/code>\u3067\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u5b9f\u884c\u3057\u3066\u3044\u307e\u3059\u3002React\u306b\u6bd4\u3079\u3066\u8a18\u8ff0\u91cf\u304c\u5c11\u306a\u304f\u3001\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u5074\u304cFLIP\u306e\u30e9\u30a4\u30d5\u30b5\u30a4\u30af\u30eb\u3092\u7ba1\u7406\u3057\u3066\u304f\u308c\u308b\u306e\u306f\u5927\u304d\u306a\u5229\u70b9\u3067\u3059\u3002<\/p>\n\n\n\n
    \u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u7dad\u6301\u3059\u308b\u305f\u3081\u306e3\u3064\u306e\u5bfe\u7b56<\/h2>\n\n\n\n
    FLIP\u3092\u5c0e\u5165\u3059\u308b\u3060\u3051\u3067transform<\/code>\u30d9\u30fc\u30b9\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306b\u306f\u306a\u308a\u307e\u3059\u304c\u3001\u5b9f\u30d7\u30ed\u30c0\u30af\u30c8\u3067\u5b89\u5b9a\u3057\u305f60fps\u3092\u4fdd\u3064\u306b\u306f\u3082\u3046\u5c11\u3057\u914d\u616e\u304c\u5fc5\u8981\u3067\u3059\u3002<\/p>\n\n\n\n
    will-change\u3068contain\u3067\u30ec\u30a4\u30a2\u30a6\u30c8\u5f71\u97ff\u3092\u5c40\u6240\u5316\u3059\u308b<\/h3>\n\n\n\n
    will-change: transform<\/code>\u306f\u30d6\u30e9\u30a6\u30b6\u306b\u5bfe\u3057\u3066\u300c\u3053\u306e\u8981\u7d20\u306ftransform\u304c\u5909\u308f\u308b\u4e88\u5b9a\u304c\u3042\u308b\u300d\u3068\u4e8b\u524d\u306b\u4f1d\u3048\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u3059\u3002\u30d6\u30e9\u30a6\u30b6\u306f\u3053\u306e\u8981\u7d20\u3092\u72ec\u7acb\u3057\u305f\u30ec\u30a4\u30e4\u30fc\u306b\u6607\u683c\u3055\u305b\u3001\u5408\u6210\u51e6\u7406\u3092\u6700\u9069\u5316\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
    .card {\n  will-change: transform;\n}\n\n.card-grid {\n  contain: layout;\n}<\/code><\/pre>\n\n\n\n
    contain: layout<\/code>\u306f\u3001\u30b3\u30f3\u30c6\u30ca\u5185\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u5909\u66f4\u304c\u5916\u5074\u306b\u6ce2\u53ca\u3057\u306a\u3044\u3053\u3068\u3092\u30d6\u30e9\u30a6\u30b6\u306b\u5ba3\u8a00\u3057\u307e\u3059\u3002\u30ab\u30fc\u30c9\u4e00\u89a7\u306e\u89aa\u8981\u7d20\u306b\u6307\u5b9a\u3057\u3066\u304a\u304f\u3068\u3001\u4e26\u3073\u66ff\u3048\u6642\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u518d\u8a08\u7b97\u306e\u7bc4\u56f2\u304c\u30b3\u30f3\u30c6\u30ca\u5185\u306b\u9650\u5b9a\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n
    \u305f\u3060\u3057\u3001will-change<\/code>\u3092\u5e38\u6642\u6307\u5b9a\u3059\u308b\u3068\u30e1\u30e2\u30ea\u3092\u4f59\u5206\u306b\u6d88\u8cbb\u3057\u307e\u3059\u3002\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u958b\u59cb\u524d\u306b\u30bb\u30c3\u30c8\u3057\u3001transitionend<\/code>\u3067\u89e3\u9664\u3059\u308b\u306e\u304c\u7406\u60f3\u3067\u3059\u3002\u8981\u7d20\u6570\u304c50\u4ef6\u672a\u6e80\u3067\u3042\u308c\u3070\u5e38\u6642\u6307\u5b9a\u3067\u3082\u554f\u984c\u306a\u3044\u30b1\u30fc\u30b9\u304c\u591a\u3044\u3067\u3059\u304c\u3001\u6570\u767e\u4ef6\u898f\u6a21\u3067\u306f\u52d5\u7684\u306a\u4ed8\u3051\u5916\u3057\u3092\u691c\u8a0e\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n
    \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u7d42\u4e86\u5f8c\u306e\u30af\u30ea\u30fc\u30f3\u30a2\u30c3\u30d7<\/h3>\n\n\n\n
    FLIP\u3067\u8a2d\u5b9a\u3057\u305ftransition<\/code>\u3084will-change<\/code>\u3092\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u7d42\u4e86\u5f8c\u306b\u653e\u7f6e\u3059\u308b\u3068\u3001\u6b21\u306e\u4e26\u3073\u66ff\u3048\u64cd\u4f5c\u3067\u610f\u56f3\u3057\u306a\u3044\u52d5\u304d\u304c\u767a\u751f\u3059\u308b\u539f\u56e0\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
    element.addEventListener('transitionend', (e) => {\n  \/\/ transform\u4ee5\u5916\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u306etransitionend\u3092\u7121\u8996\n  if (e.propertyName !== 'transform') return;\n  element.style.transition = '';\n  element.style.willChange = '';\n}, { once: true });<\/code><\/pre>\n\n\n\n
    { once: true }<\/code>\u3092\u4ed8\u3051\u3066\u30ea\u30b9\u30ca\u30fc\u306e\u81ea\u52d5\u89e3\u9664\u3092\u884c\u3044\u3001\u30e1\u30e2\u30ea\u30ea\u30fc\u30af\u3082\u9632\u304e\u307e\u3059\u3002<\/p>\n\n\n\n
    \u753b\u50cf\u30fb\u30d5\u30a9\u30f3\u30c8\u8aad\u307f\u8fbc\u307f\u4e2d\u306erect\u30ba\u30ec\u3092\u9632\u3050<\/h3>\n\n\n\n
    FLIP\u306e\u5927\u304d\u306a\u843d\u3068\u3057\u7a74\u306e\u4e00\u3064\u304c\u3001getBoundingClientRect()<\/code>\u3092\u547c\u3093\u3060\u30bf\u30a4\u30df\u30f3\u30b0\u3067\u753b\u50cf\u3084Web\u30d5\u30a9\u30f3\u30c8\u304c\u8aad\u307f\u8fbc\u307f\u9014\u4e2d\u3060\u3063\u305f\u30b1\u30fc\u30b9\u3067\u3059\u3002\u753b\u50cf\u306e\u9ad8\u3055\u304c\u78ba\u5b9a\u3057\u3066\u3044\u306a\u3044\u72b6\u614b\u3067rect\u3092\u53d6\u5f97\u3059\u308b\u3068\u3001\u6b63\u3057\u3044\u4f4d\u7f6e\u304c\u8a18\u9332\u3055\u308c\u305a\u3001\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u6642\u306b\u30ab\u30fc\u30c9\u304c\u98db\u3073\u8df3\u306d\u308b\u3088\u3046\u306a\u30ac\u30bf\u3064\u304d\u304c\u8d77\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
    \u5bfe\u7b56\u3068\u3057\u3066\u6709\u52b9\u306a\u306e\u306f\u4ee5\u4e0b\u306e2\u3064\u3067\u3059\u3002<\/p>\n\n\n\n