FLIP 动画实现多维网格的过渡_前端flip 配合表格平滑过渡-优快云博客

本文介绍如何通过FLIP技术来实现多维网格的平滑过渡动画，提供了一个在线Demo链接供读者体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

FLIP 动画实现多维网格的过渡

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript" src="lodash.min.js"></script>
    <style type="text/css" rel="stylesheet">
        button{
            width: 100px;
            height: 30px;
            border: 1px solid #666666;
            border-radius: 5px;
            background: rgba(195, 197, 221, 0.36);
            margin: 10px;
        }
        button:active, button:hover {
            box-shadow: 2px 3px 2px #999 inset;
            border: 1.5px solid rgba(195, 197, 221, 0.57);
        }
        .container {
            display: flex;
            flex-wrap: wrap; /*flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行*/
            width: 238px;
        }
        .cell {
            display: flex;
            justify-content: space-around; /*在弹性盒对象的 <div> 元素中的各项周围留有空白,用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式*/
            align-items: center;/*居中对齐弹性盒的各项 <div> 元*/
            width: 25px;
            height: 25px;
            border: 1px solid #aaa;
            margin-right: -1px;
            margin-bottom: -1px;
        }
        .cell:nth-child(3n) {
            margin-right: 0;
        }
        .cell:nth-child(27n) {
            margin-bottom: 0;
        }
        .cells-move {
            transition: transform 1s;
        }
    </style>
</head>
<body>
    <div id="demo">
        <button @click="shuffle">Shuffle</button>
        <transition-group name="cells" tag="div" class="container">
            <div v-for="cell in cells" :key="cell.id" class="cell">
                {{ cell.number }}
            </div>
        </transition-group>
    </div>
    <script type="text/javascript">
        new Vue({
            el : "#demo",
            data: {
                cells: Array.apply(null, {length : 81}).map(function(_, index) {
                    return {
                        id: index,
                        number : index % 9 + 1
                    }
                })
            },
            methods : {
                shuffle: function() {
                    this.cells = _.shuffle(this.cells);
                }
            }
        })
    </script>
</body>
</html>