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

.wrap {
display: flex;
flex-wrap: wrap;
}
.img {
width: 25%;
}
<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)
})

目前，我也组建了一个自学群，可以一起讨论研究前端的各个事宜，以及提高能力的方法，只要你想了解前端，精通前端，都欢迎你们加入我们的前端自学。
2 你可以找到志同道合的朋友，相互激励的学习伙伴，还能得到大神的经验分享，和加入项目实战的机会。这是我的WEB前端q裙。---851231348
3 整理了-套最新的前端基础教程，学习前端的这个过程当中我也收集了很多前端学习手册，面试题，开发工具，PDF文档书籍教程，可以直接分享给你们。

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)
})
})
},

scheduleAnimation(update) {
// 获取旧图片的位置
const prevImgs = this.$refs.imgs.slice()
const prevSrcRectMap = createSrcRectMap(prevImgs)
// 更新数据
  update()
// DOM更新后
this.$nextTick(() => {
const currentSrcRectMap = createSrcRectMap(prevImgs)
Object.keys(prevSrcRectMap).forEach((src) => {
const currentRect = currentSrcRectMap[src]
const prevRect = prevSrcRectMap[src]
const invert = {
left: prevRect.left - currentRect.left,
top: prevRect.top - currentRect.top,
}
const keyframes = [
{
transform: `translate(${invert.left}px, ${invert.top}px)`,
},
{ transform: "" },
]
const options = {
duration: 300,
easing: "cubic-bezier(0,0,0.32,1)",
}
const animation = currentRect.img.animate(keyframes, options)
})
})
}

// 追加图片
async add() {
const newData = this.getSister()
await preload(newData)
this.scheduleAnimation(() => {
this.imgs = newData.concat(this.imgs)
})
},
// 乱序图片
shuffle() {
this.scheduleAnimation(() => {
this.imgs = shuffle(this.imgs)
})
}

const currentImgStyle = currentRect.img.style
currentImgStyle.transform = `translate(${invert.left}px, ${invert.top}px)`
currentImgStyle.transitionDuration = "0s"
this._reflow = document.body.offsetHeight
currentRect.img.classList.add("move")
currentImgStyle.transform = currentRect.img.style.transitionDuration = ""
currentRect.img.addEventListener("transitionend", () => {
currentRect.img.classList.remove("move")
})

const keyframes = [
{
transform: `translate(${invert.left}px, ${invert.top}px)`,
},
{ transform: "" },
]
const options = {
duration: 300,
easing: "cubic-bezier(0,0,0.32,1)",
}
const animation = currentRect.img.animate(keyframes, options)