前端动画必知必会：React 和 Vue 都在用的 FLIP 思想实战。

.wrap {
  display: flex;
  flex-wrap: wrap;
  column-count: 4;
}
<div v-else class="wrap">
  <div class="img-wrap" v-for="src in imgs" :key="src">
    <img ref="imgs" class="img" :src="src" />
  </div>
</div>

async add() {
  const newData = this.getSister()
  await preload(newData)
}

function getRects(doms) {
  return doms.map((dom) => {
    const rect = dom.getBoundingClientRect()
    const { left, top } = rect
    return { left, top }
  })
}
// 当前已有的图片
const prevImgs = this.$refs.imgs.slice()
const prevPositions = getRects(prevImgs)

this.imgs = newData.concat(this.imgs)

async add() {
  // 最新 DOM 状态
  this.$nextTick(() => {
    // 再调用同样的方法获取最新的元素位置
    const currentPositions = getRects(prevImgs)
},

prevImgs.forEach((imgRef, imgIndex) => {
  const currentPosition = currentPositions[imgIndex]
  const prevPosition = prevPositions[imgIndex]
  // 倒置后的位置，虽然图片移动到最新位置了，但你先给我回去，等着我来让你做动画。
  const invert = {
    left: prevPosition.left - currentPosition.left,
    top: prevPosition.top - currentPosition.top,
  }
  const keyframes = [
    // 初始位置是倒置后的位置
    {
      transform: `translate(${invert.left}px, ${invert.top}px)`,
    },
    // 图片更新后本来应该在的位置
    { transform: "translate(0)" },
  ]
  const options = {
    duration: 300,
    easing: "cubic-bezier(0,0,0.32,1)",
  }
  const animation = imgRef.animate(keyframes, options)
})

async add() {
  const newData = this.getSister()
  await preload(newData)
  const prevImgs = this.$refs.imgs.slice()
  const prevPositions = getRects(prevImgs)
  this.imgs = newData.concat(this.imgs)
  this.$nextTick(() => {
    const currentPositions = getRects(prevImgs)
    prevImgs.forEach((imgRef, imgIndex) => {
      const currentPosition = currentPositions[imgIndex]
      const prevPosition = prevPositions[imgIndex]
      const invert = {
        left: prevPosition.left - currentPosition.left,
        top: prevPosition.top - currentPosition.top,
      }
      const keyframes = [
        {
          transform: `translate(${invert.left}px, ${invert.top}px)`,
        },
        { transform: "translate(0)" },
      ]
      const options = {
        duration: 300,
        easing: "cubic-bezier(0,0,0.32,1)",
      }
      const animation = imgRef.animate(keyframes, options)
    })
  })
},