vue 列表的排序过渡 shuffle遇到的问题
内部的实现,Vue 使用了一个叫 FLIP 简单的动画队列
使用 transforms 将元素从之前的位置平滑过渡新的位置
需要注意的是使用 FLIP 过渡的元素不能设置为 display: inline 。作为替代方案,可以设置为 display: inline-block 或者放置于 flex 中
FLIP 动画不仅可以实现单列过渡,多维网格也同样可以过渡:
<template>
<div class="n-tag">
<h1>所有标签</h1>
<button @click="shuffle">shuffle</button>
<transition-group name="cell" tag="div" class="container">
<div v-for="cell in cells" :key="cell.id" class="cell">
{{cell.number}}
</div>
</transition-group>
</div>
</template> <script>
// 要引入lodash.js
import _ from "lodash/lodash";
export default {
data() {
return {
cells: Array.apply(null, {
length: 81
}).map(function(_, index) {
return {
id: index,
number: index % 9 + 1
};
})
};
},
methods: {
shuffle() {
this.cells = _.shuffle(this.cells);
}
}
};
</script> <style scoped>
.n-tag {
background: #fff;
padding: 20px;
}
.container {
display: flex;
flex-wrap: wrap;
width: 238px;
margin-top: 10px;
}
.cell {
display: flex;
justify-content: space-around;
align-items: center;
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;
}
.cell-move {
transition: transform 1s;
}
</style>
若没有引入lodash.js 会报错
修改.eslint.js 文件 ,增加属性
"globals": {
"document": true,
"localStorage": true,
"window": true,
"_": true
}
然后引用lodash.js
import _ from "lodash/lodash";
vue 列表的排序过渡 shuffle遇到的问题的更多相关文章
- Vue学习笔记【22】——Vue中的动画(列表的排序过渡)
<transition-group> 组件还有一个特殊之处.不仅可以进入和离开动画,还可以改变定位.要使用这个新功能只需了解新增的 v-move 特性,它会在元素的改变定位的过程中应用. ...
- Vue列表过渡
前面的话 本文将详细介绍Vue列表过渡 概述 前面分别介绍了单元素CSS过渡和JS过渡,以及多元素过渡.如何同时渲染整个列表呢?在这种情景中,需要使用<transition-group>组 ...
- easyui datagrid 点击列表头排序出现错乱的原因
之前我的导师,也就是带我的同事,使用datagrid,发现点击列表头排序出现乱序,按理说只有顺序和逆序两种排序结果.因为他比较忙,当时没解决,把排序禁掉了,后来又要求一定要排序,所以他交给我. 一开始 ...
- Python list列表的排序
当我们从数据库中获取一写数据后,一般对于列表的排序是经常会遇到的问题,今天总结一下python对于列表list排序的常用方法: 第一种:内建函数sort() 这个应该是我们使用最多的也是最简单的排序函 ...
- python内置数据类型-字典和列表的排序 python BIT sort——dict and list
python中字典按键或键值排序(我转!) 一.字典排序 在程序中使用字典进行数据信息统计时,由于字典是无序的所以打印字典时内容也是无序的.因此,为了使统计得到的结果更方便查看需要进行排序. Py ...
- Vue列表渲染
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson09 一 for循环数组 <!DOCTYPE html> ...
- Vue过渡效果之CSS过渡
前面的话 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.本文将从CSS过渡transition.CSS动画animation及配合使用第三方CSS动画库(如animate. ...
- Vue过渡效果之JS过渡
前面的话 与CSS过渡不同,JS过渡主要通过事件进行触发.本文将详细介绍Vue过渡效果之JS过渡 事件钩子 JS过渡主要通过事件监听事件钩子来触发过渡,共包括如下的事件钩子 <transitio ...
- [转载]EF或LINQ 查询时使用IN并且根据列表自定义排序方法
原文地址:EF或LINQ 查询时使用IN并且根据列表自定义排序方法作者:李明川 EF和LINQ改变了原有的手写SQL时期的一些编码方法,并且增强了各数据库之间的移植性简化了开发时的代码量和难度,由于很 ...
随机推荐
- java时间格式转换任意格式
例如:20180918/120023转换成2018-09-18 12:00:23 //时间格式转换 public String getNomalTime(String oldTime){ String ...
- JS/jQuery点击某元素之外触发事件
JQuery // 第一步:点击任何地方都触发事件 $(document).click(function(){ alert("点击当前页面的任何地方都触发此点击事件:"); }); ...
- JS/Jquery关系
1. JS / JQuery介绍 Jquery是JS库,何为JS库,即把常用的js方法进行封装,封装到单独的JS文件中,要用的时候直接调用即可: 2. JS / JQuery对象 1. 定义 (1) ...
- 【Java】 生成32位随机字符编号
/** * 生成32位编码 * @return string */ public static String getUUID(){ String uuid = UUID.randomUUID().to ...
- 经典面试题golang实现方式(一)
以下所有题目的关键信息都会用[]括起来,我们不对题目进行分析,只给出题目的解决方案:如有疑问请不吝赐教. 题目: 请实现一个算法,确定一个字符串的所有字符[是否全都不同].这里我们要求[不允许使用额外 ...
- java生成32位UUID
java生成32位UUID,具体代码如下: package com.fxsen.uuid; import java.util.UUID; /** * Copyright: Copyright (c) ...
- MySQL的索引原理(图解)
数据库的索引原理 0.什么是索引 索引是一种特殊的文件(InnoDB数据表上的索引是表空间的一个组成部分),它们包含着对数据表里所有记录的引用指针.更通俗的说,数据库索引好比是一本书前面的目录,能 ...
- Nmon监控结果分析
一:CPU信息 SYS_SUMM图表: 1.折线图中蓝线为cpu占有率变化情况:粉线为磁盘IO的变化情况: 2.下面表各种左边的位磁盘的总体数据,包括如下几个: Avg tps during an i ...
- python学习(索引/切片)
一.索引 1.索引值从左到右-->从0开始,索引值从右到左-->从-1开始 取值格式var[index] >>> name = "xinfangshuo&quo ...
- powershell加载EXE进内存运行
当实战中我们想在目标上运行一些相当复杂的功能,这些功能常是 EXE 文件的一部分.我不想直接在目标上放置一个二进制文件,因为这样可能会触发反病毒机制.一个很好的思路就是将二进制文件嵌入到 Powers ...