{"id":2986,"date":"2020-06-04T18:19:14","date_gmt":"2020-06-04T10:19:14","guid":{"rendered":"http:\/\/www.yuguoxy.com\/geekhome\/?p=2986"},"modified":"2026-08-18T12:35:31","modified_gmt":"2026-08-18T04:35:31","slug":"%e5%89%8d%e7%ab%af%e5%8a%a8%e7%94%bb%e5%bf%85%e7%9f%a5%e5%bf%85%e4%bc%9a%ef%bc%9areact-%e5%92%8c-vue-%e9%83%bd%e5%9c%a8%e7%94%a8%e7%9a%84-flip-%e6%80%9d%e6%83%b3%e5%ae%9e%e6%88%98%e3%80%82","status":"publish","type":"post","link":"https:\/\/ai.zhousir.top\/?p=2986","title":{"rendered":"\u524d\u7aef\u52a8\u753b\u5fc5\u77e5\u5fc5\u4f1a\uff1aReact \u548c Vue \u90fd\u5728\u7528\u7684 FLIP \u601d\u60f3\u5b9e\u6218\u3002"},"content":{"rendered":"
\n

Vue \u5b98\u7f51\u8fc7\u6e21\u52a8\u753b\u91cc\u6709\u4e00\u6bb5\u5f88\u70ab\u7684\u6548\u679c\u3002\u4e4d\u4e00\u770b\u624b\u5199\u903b\u8f91\u4f1a\u5f88\u590d\u6742\uff0c\u6587\u6863\u91cc\u51fa\u73b0\u4e86 FLIP<\/strong>\u3002\u987a\u7740\u8fd9\u6761\u7ebf\u80fd\u5728 Aerotwist \u7684 flip-your-animations \u4e0a\u627e\u5230\u601d\u8def\uff0c\u518d\u4e00\u6b65\u6b65\u505a\u51fa\u7c7b\u4f3c\u6548\u679c\u3002\u56fe\u7247\u7d20\u6750\u5f15\u81ea\u77e5\u4e4e\u300a\u6709\u4e2a\u6f02\u4eae\u5973\u670b\u53cb\u662f\u79cd\u600e\u6837\u7684\u4f53\u9a8c\uff1f\u300b\uff0c\u4fb5\u5220\u3002<\/p>\n

\"flip1\"<\/p>\n

\u672c\u6587\u6700\u7ec8\u6548\u679c\uff1a<\/p>\n

\"flip4\"<\/p>\n

\u9884\u89c8\uff1ahttp:\/\/sl1673495.gitee.io\/flip-animation<\/a><\/p>\n\n\n\n\n\n\n\n\n
\u5b57\u6bcd<\/th>\n\u542b\u4e49<\/th>\n\u5728\u672c\u6587\u91cc<\/th>\n<\/tr>\n<\/thead>\n
First<\/td>\n\u52a8\u753b\u524d\u7684\u521d\u59cb\u72b6\u6001\uff08\u4f4d\u7f6e\u3001\u900f\u660e\u5ea6\u7b49\uff09<\/td>\ngetBoundingClientRect \u8bb0\u4e0b\u65e7\u56fe left\/top<\/td>\n<\/tr>\n
Last<\/td>\n\u52a8\u753b\u540e\u7684\u6700\u7ec8\u72b6\u6001<\/td>\n\u6539\u6570\u636e\u540e DOM \u5df2\u53d8\u3001\u6d4f\u89c8\u5668\u5c1a\u672a\u7ed8\u5236<\/td>\n<\/tr>\n
Invert<\/td>\n\u5148\u628a\u5143\u7d20\u201c\u5012\u201d\u56de\u52a8\u753b\u524d\u7684\u89c6\u89c9\u4f4d\u7f6e<\/td>\ntranslate \u56de\u504f\u79fb\u91cf<\/td>\n<\/tr>\n
Play<\/td>\n\u518d\u64ad\u5230\u771f\u6b63\u7684\u65b0\u4f4d\u7f6e<\/td>\nWeb Animation API \u7684 animate<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\u4e00\u3001FLIP \u56db\u6b65<\/h2>\n

First<\/h3>\n

\u5373\u5c06\u505a\u52a8\u753b\u7684\u5143\u7d20\u7684\u521d\u59cb\u72b6\u6001\uff08\u4f4d\u7f6e\u3001\u900f\u660e\u5ea6\u7b49\uff09\u3002<\/p>\n

Last<\/h3>\n

\u5373\u5c06\u505a\u52a8\u753b\u7684\u5143\u7d20\u7684\u6700\u7ec8\u72b6\u6001\u3002<\/p>\n

Invert<\/h3>\n

\u5047\u8bbe\u56fe\u7247\u521d\u59cb \u5de6: 0, \u4e0a\uff1a0<\/code>\uff0c\u6700\u7ec8 \u5de6\uff1a100, \u4e0a100<\/code>\uff0c\u7b49\u4e8e\u5411\u53f3\u4e0b\u8d70\u4e86 100px\u3002\u4e0d\u8981\u5148\u7b97\u7ec8\u70b9\u518d\u547d\u4ee4\u5b83\u4ece 0,0 \u8d70\u5230 100,100\uff0c\u800c\u662f\u5148\u8ba9\u5143\u7d20\u81ea\u5df1\u79fb\u52a8\u8fc7\u53bb<\/strong>\uff08Vue \u91cc\u7528\u6570\u636e\u9a71\u52a8\uff0c\u6570\u7ec4\u524d\u9762\u8ffd\u52a0\u51e0\u5f20\u56fe\uff0c\u65e7\u56fe\u5c31\u88ab\u6324\u4e0b\u53bb\uff09\u3002<\/p>\n

\u5173\u952e\u70b9\uff1aDOM \u5c5e\u6027\u53d8\u5316\uff08left\u3001right\u3001transform \u7b49\uff09\u4f1a\u88ab\u6512\u5230\u4e0b\u4e00\u5e27\u7edf\u4e00\u6e32\u67d3\u3002\u4e8e\u662f\u5b58\u5728\u4e00\u4e2a\u65f6\u95f4\u70b9\uff1aDOM \u72b6\u6001\u5df2\u7ecf\u53d8\u4e86\uff0c\u6d4f\u89c8\u5668\u8fd8\u6ca1\u753b\u3002<\/strong>\u53ef\u4ee5\u5148\u8ba9 Vue \u6539 DOM\uff0c\u6b64\u65f6\u5df2\u80fd\u8bfb\u5230\u53d8\u66f4\u540e\u7684\u4f4d\u7f6e\u3002<\/p>\n

\u4e00\u884c\u4e24\u5f20\u56fe\uff0c\u521d\u59cb [img1, img2]<\/code>\uff0c\u5934\u90e8\u8ffd\u52a0\u540e\u53d8\u6210 [img3, img4, img1, img2]<\/code>\uff0cimg1\/img2 \u88ab\u6324\u5230\u4e0b\u4e00\u884c\u3002img1 \u4ece 0,0 \u5230 100,100\uff0c\u6d4f\u89c8\u5668\u8fd8\u6ca1\u753b\uff0c\u5148 img1.style.transform = translate(-100px, -100px)<\/code>\uff0c\u628a\u5b83 Invert \u56de\u4f4d\u79fb\u524d\u3002<\/p>\n

Play<\/h3>\n

\u5012\u7f6e\u540e\u518d\u8ba9\u5b83\u56de\u5230 0, 0<\/code> \u5373\u53ef\u3002\u672c\u6587\u7528 Web Animation API<\/code> \u505a\u6700\u540e\u7684 Play\uff08MDN\uff1aWeb Animation\uff09\u3002<\/p>\n

\u4e8c\u3001\u5b9e\u73b0<\/h2>\n

\u56fe\u7247\u7528 column-count: 4<\/code> \u6392\u6210 4 \u5217\uff1a<\/p>\n

.wrap {\n  display: flex;\n  flex-wrap: wrap;\n  column-count: 4;\n}\n\n<div v-else class=\"wrap\">\n  <div class=\"img-wrap\" v-for=\"src in imgs\" :key=\"src\">\n    <img ref=\"imgs\" class=\"img\" :src=\"src\" \/>\n  <\/div>\n<\/div><\/code><\/pre>\n
\u5173\u952e\u662f\u5f80 imgs<\/code> \u8ffd\u52a0\u5143\u7d20\u540e\uff0c\u505a\u6d41\u7545\u7684\u8def\u5f84\u52a8\u753b\u3002\u5148\u5b9e\u73b0 add<\/code>\uff1a<\/p>\n
async add() {\n  const newData = this.getSister()\n  await preload(newData)\n}<\/code><\/pre>\n
\u968f\u673a\u53d6\u51e0\u5f20\u56fe\uff0cnew Image<\/code> \u9884\u52a0\u8f7d\u9632\u6b62\u7a7a\u767d\uff0c\u518d\u7b97\u65e7\u56fe\u4f4d\u7f6e\uff1a<\/p>\n
function getRects(doms) {\n  return doms.map((dom) => {\n    const rect = dom.getBoundingClientRect()\n    const { left, top } = rect\n    return { left, top }\n  })\n}\n\n\/\/ \u5f53\u524d\u5df2\u6709\u7684\u56fe\u7247\nconst prevImgs = this.$refs.imgs.slice()\nconst prevPositions = getRects(prevImgs)<\/code><\/pre>\n
\u8bb0\u4e0b\u65e7\u4f4d\u7f6e\u540e\u8ffd\u52a0\uff1a<\/p>\n
this.imgs = newData.concat(this.imgs)<\/code><\/pre>\n
Vue \u5f02\u6b65\u6e32\u67d3\uff0c\u6539 imgs<\/code> \u4e0d\u4f1a\u7acb\u523b\u52a8 DOM\uff0c\u8981\u7528 nextTick<\/code>\uff1a\u56de\u8c03\u8fdb microTask\u3002microTask \u4e00\u5b9a\u53d1\u751f\u5728\u6d4f\u89c8\u5668\u91cd\u7ed8\u524d\u3002<\/p>\n
\u5148\u6267\u884c this.imgs = newData.concat(this.imgs)<\/code>\uff0c\u89e6\u53d1\u4f9d\u8d56\u66f4\u65b0\uff0cVue \u628a\u672c\u6b21 DOM \u66f4\u65b0\u63a8\u8fdb microTask\uff0c\u961f\u5217\u662f [changeDOM]<\/code>\u3002\u518d nextTick(callback)<\/code>\uff0c\u53d8\u6210 [changeDOM, callback]<\/code>\u3002\u6240\u4ee5 nextTick \u91cc\u4e00\u5b9a\u80fd\u62ff\u5230\u6700\u65b0 DOM\u3002<\/p>\n
\u4fdd\u5b58\u8fc7 prevImgs<\/code>\uff0cnextTick \u91cc\u518d getRects<\/code> \u5c31\u662f\u65e7\u56fe\u7247\u7684\u65b0\u4f4d\u7f6e\uff1a<\/p>\n
async add() {\n  \/\/ \u6700\u65b0 DOM \u72b6\u6001\n  this.$nextTick(() => {\n    \/\/ \u518d\u8c03\u7528\u540c\u6837\u7684\u65b9\u6cd5\u83b7\u53d6\u6700\u65b0\u7684\u5143\u7d20\u4f4d\u7f6e\n    const currentPositions = getRects(prevImgs)\n},<\/code><\/pre>\n
\u6709\u4e86\u65b0\u65e7\u4f4d\u7f6e\u5c31\u53ef\u4ee5 Invert \u518d Play\uff1a<\/p>\n
prevImgs.forEach((imgRef, imgIndex) => {\n  const currentPosition = currentPositions[imgIndex]\n  const prevPosition = prevPositions[imgIndex]\n\n  \/\/ \u5012\u7f6e\u540e\u7684\u4f4d\u7f6e\uff0c\u867d\u7136\u56fe\u7247\u79fb\u52a8\u5230\u6700\u65b0\u4f4d\u7f6e\u4e86\uff0c\u4f46\u4f60\u5148\u7ed9\u6211\u56de\u53bb\uff0c\u7b49\u7740\u6211\u6765\u8ba9\u4f60\u505a\u52a8\u753b\u3002\n  const invert = {\n    left: prevPosition.left - currentPosition.left,\n    top: prevPosition.top - currentPosition.top,\n  }\n\n  const keyframes = [\n    \/\/ \u521d\u59cb\u4f4d\u7f6e\u662f\u5012\u7f6e\u540e\u7684\u4f4d\u7f6e\n    {\n      transform: `translate(${invert.left}px, ${invert.top}px)`,\n    },\n    \/\/ \u56fe\u7247\u66f4\u65b0\u540e\u672c\u6765\u5e94\u8be5\u5728\u7684\u4f4d\u7f6e\n    { transform: \"translate(0)\" },\n  ]\n\n  const options = {\n    duration: 300,\n    easing: \"cubic-bezier(0,0,0.32,1)\",\n  }\n\n  const animation = imgRef.animate(keyframes, options)\n})<\/code><\/pre>\n
\u5b8c\u6574\u5b9e\u73b0\uff1a<\/p>\n
async add() {\n  const newData = this.getSister()\n  await preload(newData)\n\n  const prevImgs = this.$refs.imgs.slice()\n  const prevPositions = getRects(prevImgs)\n\n  this.imgs = newData.concat(this.imgs)\n\n  this.$nextTick(() => {\n    const currentPositions = getRects(prevImgs)\n\n    prevImgs.forEach((imgRef, imgIndex) => {\n      const currentPosition = currentPositions[imgIndex]\n      const prevPosition = prevPositions[imgIndex]\n\n      const invert = {\n        left: prevPosition.left - currentPosition.left,\n        top: prevPosition.top - currentPosition.top,\n      }\n\n      const keyframes = [\n        {\n          transform: `translate(${invert.left}px, ${invert.top}px)`,\n        },\n        { transform: \"translate(0)\" },\n      ]\n\n      const options = {\n        duration: 300,\n        easing: \"cubic-bezier(0,0,0.32,1)\",\n      }\n\n      const animation = imgRef.animate(keyframes, options)\n    })\n  })\n},<\/code><\/pre>\n
\u4e09\u3001\u6e90\u7801\u4e0e\u9002\u7528\u9762<\/h2>\n
https:\/\/github.com\/sl1673495\/flip-animation<\/a><\/p>\n
FLIP \u4e0d\u53ea\u505a\u4f4d\u79fb\uff0c\u900f\u660e\u5ea6\u3001\u5bbd\u9ad8\u4e00\u6837\u80fd\u505a\u3002\u7535\u5546\u91cc\u70b9\u5546\u54c1\u56fe\uff0c\u4ece\u56fe\u539f\u6765\u7684\u4f4d\u7f6e\u653e\u5927\u6210\u6574\u9875\uff0c\u5c31\u662f\u8fd9\u7c7b\u601d\u8def\u3002<\/p>\n
\u53ea\u8981\u77e5\u9053\u52a8\u753b\u524d\u3001\u52a8\u753b\u540e\u7684\u72b6\u6001\uff0c\u5c31\u80fd\u6d41\u7545\u8fc7\u6e21\uff0c\u800c\u4e14\u6b64\u65f6 DOM \u662f\u5e72\u51c0\u7684\u2014\u2014\u4e0d\u662f\u786c\u7f16\u7801\u5f3a\u8feb\u5b83\u4ece 0,0 \u8d70\u5230 100,100\u3002<\/p>\n
\n
\u4e00\u53e5\u8bdd\u603b\u7ed3\uff1aFLIP \u662f\u5148\u8ba9 DOM \u8d70\u5230\u7ec8\u70b9\uff0c\u518d\u5728\u7ed8\u5236\u524d\u7528 transform \u5012\u56de\u53bb\uff0c\u6700\u540e\u7528\u52a8\u753b\u201c\u5047\u88c5\u201d\u8d70\u8fc7\u53bb\uff0cReact \u548c Vue \u7684\u5217\u8868\u8fc7\u6e21\u90fd\u662f\u8fd9\u5957\u3002<\/strong><\/p>\n<\/blockquote>\n<\/section>\n","protected":false},"excerpt":{"rendered":"
Vue \u5b98\u7f51\u8fc7\u6e21\u52a8\u753b\u91cc\u6709\u4e00\u6bb5\u5f88\u70ab\u7684\u6548\u679c\u3002\u4e4d\u4e00\u770b\u624b\u5199\u903b\u8f91\u4f1a\u5f88\u590d\u6742\uff0c\u6587\u6863\u91cc\u51fa\u73b0\u4e86 FLIP\u3002\u987a\u7740\u8fd9\u6761\u7ebf\u80fd\u5728 Aer […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[105,147],"tags":[142,148,205],"_links":{"self":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2986"}],"collection":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2986"}],"version-history":[{"count":2,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2986\/revisions"}],"predecessor-version":[{"id":2990,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2986\/revisions\/2990"}],"wp:attachment":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2986"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2986"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2986"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}