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

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

Demo地址：https://jsfiddle.net/chrzmzxv/

<meta charset="UTF-8" />
<title></title>
<script type="text/javascript" src="vue.js"></script><script type="text/javascript" src="lodash.min.js"></script>
<style rel="stylesheet" type="text/css">
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; /*在弹性盒对象的 <p> 元素中的各项周围留有空白,用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式*/
            align-items: center;/*居中对齐弹性盒的各项 <p> 元*/
            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>
<p id="demo"><button click="shuffle">Shuffle</button><transition-group class="container" name="cells" tag="p">
<p :key="cell.id" class="cell" v-for="cell in cells">{{ cell.number }}</p>
</transition-group></p>
<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>