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

来源：互联网发布：怎么举报网络诈骗编辑：程序博客网时间：2024/05/17 22:41
FLIP 动画实现多维网格的过渡

Demo地址：https://jsfiddle.net/chrzmzxv/
<!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>
阅读全文
0 0