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