function shuffle(array) {
  let len = array.length;
  for (let i = len - 1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array.slice()
}

function getPositionList(domList) {
  return domList.map((dom) => {
    const {left, top} = dom.getBoundingClientRect()
    return {left, top}
  })
}


var vm = new Vue({
  el:"#app",
  data() {
    let list = []
    for (let i = 0; i < 100; ++i) {
      list.push(i)
    }
    return {
      list
    }
  },

  methods: {
    shuffle() {
      this.list = shuffle(this.list)

      const cellList = this.$refs.cell.slice() // 保存快照

      const originPositions = getPositionList(cellList)

      this.$nextTick(() => {
        // 需要保证变化前后的DOM节点一致，因此v-for的key不能使用index
        const currentPositions = getPositionList(cellList)

        cellList.forEach((cell, index) => {
          let cur = currentPositions[index]
          let origin = originPositions[index]

          const invert = {
            left: origin.left - cur.left,
            top: origin.top - cur.top,
          }

          const keyframes = [
            {
              transform: `translate(${invert.left}px, ${invert.top}px)`,
            },
            {transform: "translate(0)"},
          ]

          const options = {
            duration: 3000,
            easing: "linear",
          }

          cell.animate(keyframes, options)
        })
      })


    }
  }
})