Flip动画的实现示例demo
- 文章说明
- 核心代码
- 效果展示
- Flip动画工具类的封装
文章说明
文章主要为了学习flip动画的实现思路，并且采用此示例效果来理解该实现思路的含义
参考渡一前端袁老师的讲解视频
核心代码
采用简单的y轴变化的动画效果为示例
<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container {margin: auto;margin-top: 100px;width: 100px;div {height: 30px;line-height: 30px;margin: 10px 0;background-color: chocolate;border-radius: 10px;color: #ffffff;text-align: center;}}</style>
</head><body><div class="container"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div><button onclick="randomFlip()">点击flip</button><script>function getElemConfig(container, children, first, last) {const elemFirst = container.children[first];const elemLast = container.children[last];const destElem = children[last];destElem.style.transform = `translateY(${elemLast.getBoundingClientRect().y - elemFirst.getBoundingClientRect().y}px)`;return destElem;}function play(destElem) {setTimeout(() => {for (let i = 0; i < destElem.length; i++) {destElem[i].style.transition = "transform 1s";destElem[i].style.removeProperty("transform");}}, 100);}function randomFlip() {const numbers = [];const container = document.getElementsByClassName("container")[0];const children = [];for (let i = 0; i < container.children.length; i++) {numbers.push(i);children.push(container.children[i].cloneNode(true));}const result = derange(numbers);const destElem = [];for (let i = 0; i < result.length; i++) {destElem.push(getElemConfig(container, children, i, result[i]));}container.innerHTML = "";for (let i = 0; i < destElem.length; i++) {container.appendChild(destElem[i]);}play(destElem);}function derange(array) {let derangedArray = array.slice();let i = derangedArray.length;while (i > 0) {let j = Math.floor(Math.random() * i);while (j === i || derangedArray[i] === derangedArray[j]) {j = Math.floor(Math.random() * i);}[derangedArray[i - 1], derangedArray[j]] = [derangedArray[j], derangedArray[i - 1]];i--;}return derangedArray;}</script>
</body></html>
效果展示
采用translateY进行 transform 动画
Gif展示
Flip动画工具类的封装
在实现拖拽排序示例时，我在参考的学习视频中看到有关于Flip动画功能进行了封装，我于是自己研究了一下，封装了该工具，工具类如下
class Flip {children = null;delay = 0;constructor(children, delay = 1) {this.children = children;this.calculatePos();this.delay = delay;}calculatePos(name = "first") {const children = this.children;for (let i = 0; i < children.length; i++) {children[i][name] = children[i].getBoundingClientRect();}}play() {this.calculatePos("last");const children = this.children;for (let i = 0; i < children.length; i++) {const first = children[i]["first"];const last = children[i]["last"];if (first.x !== last.x || first.y !== last.y) {children[i].style.transform = `translateY(${first.y - last.y}px) translateX(${first.x - last.x}px)`;setTimeout(() => {children[i].style.transition = `transform ${this.delay}s`;children[i].style.removeProperty("transform");setTimeout(() => {children[i].style.removeProperty("transition");this.calculatePos();}, this.delay * 1000);}, 0);}}}
}
关于拖拽排序和该工具类的使用，可参考这篇文章–拖拽排序