内部的实现,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遇到的问题的更多相关文章

  1. Vue学习笔记【22】——Vue中的动画(列表的排序过渡)

    <transition-group> 组件还有一个特殊之处.不仅可以进入和离开动画,还可以改变定位.要使用这个新功能只需了解新增的 v-move 特性,它会在元素的改变定位的过程中应用. ...

  2. Vue列表过渡

    前面的话 本文将详细介绍Vue列表过渡 概述 前面分别介绍了单元素CSS过渡和JS过渡,以及多元素过渡.如何同时渲染整个列表呢?在这种情景中,需要使用<transition-group>组 ...

  3. easyui datagrid 点击列表头排序出现错乱的原因

    之前我的导师,也就是带我的同事,使用datagrid,发现点击列表头排序出现乱序,按理说只有顺序和逆序两种排序结果.因为他比较忙,当时没解决,把排序禁掉了,后来又要求一定要排序,所以他交给我. 一开始 ...

  4. Python list列表的排序

    当我们从数据库中获取一写数据后,一般对于列表的排序是经常会遇到的问题,今天总结一下python对于列表list排序的常用方法: 第一种:内建函数sort() 这个应该是我们使用最多的也是最简单的排序函 ...

  5. python内置数据类型-字典和列表的排序 python BIT sort——dict and list

    python中字典按键或键值排序(我转!)   一.字典排序 在程序中使用字典进行数据信息统计时,由于字典是无序的所以打印字典时内容也是无序的.因此,为了使统计得到的结果更方便查看需要进行排序. Py ...

  6. Vue列表渲染

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson09 一 for循环数组 <!DOCTYPE html> ...

  7. Vue过渡效果之CSS过渡

    前面的话 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.本文将从CSS过渡transition.CSS动画animation及配合使用第三方CSS动画库(如animate. ...

  8. Vue过渡效果之JS过渡

    前面的话 与CSS过渡不同,JS过渡主要通过事件进行触发.本文将详细介绍Vue过渡效果之JS过渡 事件钩子 JS过渡主要通过事件监听事件钩子来触发过渡,共包括如下的事件钩子 <transitio ...

  9. [转载]EF或LINQ 查询时使用IN并且根据列表自定义排序方法

    原文地址:EF或LINQ 查询时使用IN并且根据列表自定义排序方法作者:李明川 EF和LINQ改变了原有的手写SQL时期的一些编码方法,并且增强了各数据库之间的移植性简化了开发时的代码量和难度,由于很 ...

随机推荐

  1. java时间格式转换任意格式

    例如:20180918/120023转换成2018-09-18 12:00:23 //时间格式转换 public String getNomalTime(String oldTime){ String ...

  2. JS/jQuery点击某元素之外触发事件

    JQuery // 第一步:点击任何地方都触发事件 $(document).click(function(){ alert("点击当前页面的任何地方都触发此点击事件:"); }); ...

  3. JS/Jquery关系

    1. JS / JQuery介绍 Jquery是JS库,何为JS库,即把常用的js方法进行封装,封装到单独的JS文件中,要用的时候直接调用即可: 2. JS / JQuery对象 1. 定义 (1) ...

  4. 【Java】 生成32位随机字符编号

    /** * 生成32位编码 * @return string */ public static String getUUID(){ String uuid = UUID.randomUUID().to ...

  5. 经典面试题golang实现方式(一)

    以下所有题目的关键信息都会用[]括起来,我们不对题目进行分析,只给出题目的解决方案:如有疑问请不吝赐教. 题目: 请实现一个算法,确定一个字符串的所有字符[是否全都不同].这里我们要求[不允许使用额外 ...

  6. java生成32位UUID

    java生成32位UUID,具体代码如下: package com.fxsen.uuid; import java.util.UUID; /** * Copyright: Copyright (c) ...

  7. MySQL的索引原理(图解)

    数据库的索引原理 0.什么是索引 ​ 索引是一种特殊的文件(InnoDB数据表上的索引是表空间的一个组成部分),它们包含着对数据表里所有记录的引用指针.更通俗的说,数据库索引好比是一本书前面的目录,能 ...

  8. Nmon监控结果分析

    一:CPU信息 SYS_SUMM图表: 1.折线图中蓝线为cpu占有率变化情况:粉线为磁盘IO的变化情况: 2.下面表各种左边的位磁盘的总体数据,包括如下几个: Avg tps during an i ...

  9. python学习(索引/切片)

    一.索引 1.索引值从左到右-->从0开始,索引值从右到左-->从-1开始 取值格式var[index] >>> name = "xinfangshuo&quo ...

  10. powershell加载EXE进内存运行

    当实战中我们想在目标上运行一些相当复杂的功能,这些功能常是 EXE 文件的一部分.我不想直接在目标上放置一个二进制文件,因为这样可能会触发反病毒机制.一个很好的思路就是将二进制文件嵌入到 Powers ...