列表的进入/离开过渡

获取不大于数组长度的随机数,作为插入新值的位置

<div id="app" class="demo">
<button @click="add">Add</button>
<button @click="remove">Remove</button>
<br>
<br>
<transition-group name="list">
<span v-for="item in items" :key="item" class="list-item">{{item}}</span>
</transition-group>
</div>
<script>
new Vue({
el: '#app',
data: {
items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
num: 10
},
methods: {
randomIndex () {
// 获取不超过数组长度的随机数
return Math.floor(Math.random() * this.items.length)
},
add () {
// 把获取的随机数作为位置插入新元素
this.items.splice(this.randomIndex(), 0, this.num++)
},
remove () {
// 随机删除某个位置的元素
this.items.splice(this.randomIndex(), 1)
}
}
})
</script>
<style>
.list-item{
margin-right: 10px;
display: inline-block;
}
.list-enter-active, .list-leave-active{
transition: all 1s;
}
.list-enter, .list-leave-to{
opacity: 0;
transform: translateY(30px);
}
</style>

列表的排序过渡

<transition-group> 组件还有一个特殊之处。不仅可以进入和离开动画,还可以改变定位。要使用这个新功能只需了解新增的 v-move 特性,它会在元素的改变定位的过程中应用。像之前的类名一样,可以通过 name 属性来自定义前缀,也可以通过 move-class 属性手动设置。

<div id="app">
<button @click="shuffle">Shuffle</button>
<br>
<br>
<transition-group name="flip-list">
<li v-for="item in items" :key="item">{{item}}</li>
</transition-group>
</div>
<script>
new Vue({
el: '#app',
data: {
items: [1, 2, 3, 4, 5, 6, 7, 8, 9]
},
methods: {
shuffle () {
this.items = _.shuffle(this.items);
}
}
})
</script>
<style>
.flip-list-move{
transition: all .3s;
}
</style>





这个看起来很神奇,内部的实现,Vue 使用了一个叫 FLIP 简单的动画队列

使用 transforms 将元素从之前的位置平滑过渡新的位置。

我们将之前实现的例子和这个技术结合,使我们列表的一切变动都会有动画过渡。

<div id="app">
<button @click="shuffle">Shuffle</button>
<button @click="add">Add</button>
<button @click="remove">Remove</button>
<br>
<br>
<transition-group name="list">
<span v-for="item in items" :key="item" class="list-item">{{item}}</span>
</transition-group>
</div>
<script>
new Vue({
el: '#app',
data: {
items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
num: 10
},
methods: {
randomIndex () {
// 获取不超过数组长度的随机数
return Math.floor(Math.random() * this.items.length)
},
add () {
// 把获取的随机数作为位置插入新元素
this.items.splice(this.randomIndex(), 0, this.num++)
},
remove () {
// 随机删除某个位置的元素
this.items.splice(this.randomIndex(), 1)
},
shuffle () {
this.items = _.shuffle(this.items)
}
}
})
</script>
<style>
.list-item{
transition: all 1s;
margin-right: 10px;
display: inline-block;
}
.list-enter, .list-leave-to{
opacity: 0;
transform: translateY(30px);
}
.list-leave-active{
position: absolute;
}
</style>

>FLIP 动画不仅可以实现单列过渡,多维网格也同样可以过渡:
```

Shuffle

{{cell.number}}

.sudoku-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;
}

```

Vue - 过渡 列表过渡的更多相关文章

  1. vue 过渡效果-列表过渡

    到目前为止,关于过渡我们已经讲到, 单个节点 同一时间渲染多个节点的一个 那么怎么同时渲染整个列表,比如使用v-if?在这种场景下,使用<transition-group>组件,在我们深入 ...

  2. VUE笔记 - 列表过渡动画 v-enter, v-leave-to | v-enter-active, v-leave-active | v-move

    本例要结合过渡动画四个过程的示意图一起理解. https://cn.vuejs.org/v2/guide/transitions.html 疑问: v-for="(item,i) in li ...

  3. Vue中Js动画 与Velocity.js 多组件多元素 列表过渡

    Vue提供我们很多js动画钩子 写在tansition标签内部 入场动画 @before-enter="" 处理函数收到一个参数(e l) el为这个元素 @enter=" ...

  4. Vue列表过渡

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

  5. Vue基础进阶 之 列表过渡

    在前面的博客我们一直在操作单个元素的过渡,如果是对多个元素过渡,例如列表,这时就要用到<transition-group>这个组件了: 如何使用:将要操作的列表元素放在<transi ...

  6. vue总结 04过渡--进入/离开 列表过渡

    进入/离开 & 列表过渡 概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CS ...

  7. vue过渡 & 动画---进入/离开 & 列表过渡

    (1)概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animat ...

  8. Vue多元素过渡

    前面的话 前面分别介绍了单元素过渡的CSS过渡和JS过渡,本文将详细介绍Vue多元素过渡 常见示例 最常见的多标签过渡是一个列表和描述这个列表为空消息的元素: <transition> & ...

  9. Vue——关于css过渡和动画那些事

    1. 单元素/组件的过渡transition Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用 v-if) 条件展示 (使用 v ...

随机推荐

  1. Python学习笔记三:数据特征分析

    完成数据清理后,下面通过图表展开对数据的分析. 1.前期初判(分布分析): 1)判断分组区间: # a.散点图:plt.scatter(data[字段1],data['字段2'], s = data[ ...

  2. 二叉堆(1)BinaryHeap

    封装一个简单二叉堆,亦可视为优先队列. 测试文件 main.cpp: #include <iostream> #include "BinaryHeap.h" using ...

  3. JQ input输入框回车生成标签,可删除,并获取标签的值

    在网上找的,效果如下 html代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <title&g ...

  4. 你不知道的JavaScript下卷

    阿喀琉斯之踵 学习编程最好的办法就是编写代码 比较 隐式类型转换 数字和字符串 比较 字符串会隐式转换为数字,再进行比较 == 类型转换 ecma

  5. Win10安装7 —— 系统的优化

    本文内容皆为作者原创,如需转载,请注明出处:https://www.cnblogs.com/xuexianqi/p/12371356.html 一:引言 在我们使用电脑的过程中,总是有一些窗口弹出来需 ...

  6. windows 环境变量%SystemDrive%和%SystemRoot%、%AppData%、%LocalAppData%、%TEMP% 等简写

    windows 环境变量%SystemDrive% 和%SystemRoot%.%AppData%.%LocalAppData%.%TEMP% 等简写 假设操作系统安装在 C: 盘 %SYSTEMRO ...

  7. Ubuntu OS 打开端口命令

    直接执行命令:ufw allow 80 再去修改对应功能配置文件的端口号

  8. 数字输出精度 - C语言

    1. 浮点型/双精度浮点型 double a=1234.5678; printf("%8.2lf\n",a);// 小数点前的数表示总位数,小数点也算一位 printf(" ...

  9. Flatmap 和map 区别

    map将函数作用到数据集的每一个元素上,生成一个新的分布式的数据集(RDD)返回 map函数的源码:   def map(self, f, preservesPartitioning=False): ...

  10. 继 “多闪”后“飞聊”再被diss?其实社交还能这么玩

    近日头条低调上线了新的社交APP——飞聊,目前在AppStore社交排行榜第7位.但很多人使用了之后都觉得新产品的各个功能都让人想起其他的产品.兴趣小组让人想到豆瓣的兴趣小组,生活动态让人想到微博动态 ...