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>

FLIP 动画实现多维网格的过渡相关推荐

拖拽页面元素+flip动画的案例
先上效果: 实现思路和流程: 基础页面布局给每个拖动元素加上 draggable="true" ondragstart(开始拖动某个元素时)做出对应的处理获得操作的具体元素 ...
【MATLAB】三维图形绘制 ( 三维平面图 | 二维网格 | meshgrid 函数 | 绘制网格 | mesh 函授 | 绘制平面 | surf 函数 | 绘制等高线 | contour 函数 )
文章目录一.二维网格 1.线图与平面图 2.meshgrid 函数生成二维网格二.绘制网格 1.mesh 函数绘制网格 2.代码示例三.绘制平面 1.surf 函数绘制平面 2.代码示例四 ...
二维动画作品_「咻动画」二维动画制作中角色造型的设计要点
关于二维动画可能就算不是动画行业的小伙伴们都多多少少都有所了解,近年来其在宣传片制作上面越来越受用.不少企业抛开传统保守的宣传片表现形式转而尝试动画制作宣传片,我们都知道在动画制作从脚本策划到输出成片 ...
Leetcode 1559二维网格图中探测环技巧DFS|剪枝
二维网格图中探测环给你一个二维字符网格数组 grid ,大小为 m x n ,你需要检查 grid 中是否存在相同值形成的环. 一个环是一条开始和结束于同一个格子的长度大于等于 4 的路径.对 ...
LeetCode 1260. 二维网格迁移（二维转一维）
1. 题目给你一个 n 行 m 列的二维网格 grid 和一个整数 k.你需要将 grid 迁移 k 次. 每次「迁移」操作将会引发下述活动: 位于 grid[i][j] 的元素将会移动到 grid ...
【pytorch】torch.meshgrid()==＞常用于生成二维网格，比如图像的坐标点
np.meshgrid()函数常用于生成二维网格,比如图像的坐标点. x1 ,y1 = torch.meshgrid(x,y) 输入参数: 参数是两个,第一个参数我们假设是x,第二个参数假设就是y ...
17.立体匹配——动态规划公式（Dynamic Programming Formulation），二维网格上的相干立体_4
目录动态规划公式(Dynamic Programming Formulation) 二维网格上的相干立体动态规划公式(Dynamic Programming Formulation) 这就是所谓的 ...
Matlab 二维网格图pcolor和imagesc区别
Matlab 二维网格图pcolor和imagesc区别在速度或者衰减层析成像反演之后会得到地下介质每个网格点的速度/衰减值,在进行呈现的时候可以使用maltab的pcolor和imagesc进行二 ...
fluent meshing导入二维网格
fluent meshing只能在Dimension为3D时才能使用其实也可以导入二维网格,具体操作见下图所示: 还可以使用TUI命令实现二维网格的导入,命令为: Meshing> file ...

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

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

FLIP 动画实现多维网格的过渡相关推荐

最新文章

热门文章