vue 过渡效果-列表过渡
到目前为止,关于过渡我们已经讲到,
- 单个节点
- 同一时间渲染多个节点的一个
那么怎么同时渲染整个列表,比如使用v-if?在这种场景下,使用<transition-group>组件,在我们深入例子之前,先了解关于这个组件的几个特点:
- 不同于<transition>,它会以一个真实元素呈现,默认为一个<span>。你也可以通过tag特性更换为其他元素,
- 内部元素总是需要提供唯一key属性值
列表的进入和离开过渡
现在让我们由一个简单的例子深入,进入和离开的过渡使用之前一样的css类名
new Vue({
el: '#list-demo',
data: {
items: [1,2,3,4,5,6,7,8,9],
nextNum: 10
},
methods: {
randomIndex: function () {
return Math.floor(Math.random() * this.items.length)
},
add: function () {
this.items.splice(this.randomIndex(), 0, this.nextNum++)
},
remove: function () {
this.items.splice(this.randomIndex(), 1)
},
}
})
|
.flip-list-move {
transition: transform 1s;
}
|
在内部的实现上,vue使用了一个叫flip简单的动画队列,使用transfrom将元素从之前的位置平滑过渡新的位置。
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
<div id="list-complete-demo" class="demo">
<button v-on:click="shuffle">Shuffle</button>
<button v-on:click="add">Add</button>
<button v-on:click="remove">Remove</button>
<transition-group name="list-complete" tag="p">
<span
v-for="item in items"
v-bind:key="item"
class="list-complete-item"
>
{{ item }}
</span>
</transition-group>
</div>
|
Vue.component('my-special-transition', {
template: '\
<transition\
name="very-special-transition"\
mode="out-in"\
v-on:before-enter="beforeEnter"\
v-on:after-enter="afterEnter"\
>\
<slot></slot>\
</transition>\
',
methods: {
beforeEnter: function (el) {
// ...
},
afterEnter: function (el) {
// ...
}
}
})
|
函数组件更适合完成这个任务:
Vue.component('my-special-transition', {
functional: true,
render: function (createElement, context) {
var data = {
props: {
name: 'very-special-transition',
mode: 'out-in'
},
on: {
beforeEnter: function (el) {
// ...
},
afterEnter: function (el) {
// ...
}
}
}
return createElement('transition', data, context.children)
}
})
|
动态过渡
在vue中即使是过渡也是数据驱动的,动态过渡最基本的例子是通过name特性来绑定动态值。
vue 过渡效果-列表过渡的更多相关文章
- 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 ...
- Vue中Js动画 与Velocity.js 多组件多元素 列表过渡
Vue提供我们很多js动画钩子 写在tansition标签内部 入场动画 @before-enter="" 处理函数收到一个参数(e l) el为这个元素 @enter=" ...
- Vue列表过渡
前面的话 本文将详细介绍Vue列表过渡 概述 前面分别介绍了单元素CSS过渡和JS过渡,以及多元素过渡.如何同时渲染整个列表呢?在这种情景中,需要使用<transition-group>组 ...
- vue总结 04过渡--进入/离开 列表过渡
进入/离开 & 列表过渡 概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CS ...
- Vue过渡效果之CSS过渡
前面的话 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.本文将从CSS过渡transition.CSS动画animation及配合使用第三方CSS动画库(如animate. ...
- Vue过渡效果之JS过渡
前面的话 与CSS过渡不同,JS过渡主要通过事件进行触发.本文将详细介绍Vue过渡效果之JS过渡 事件钩子 JS过渡主要通过事件监听事件钩子来触发过渡,共包括如下的事件钩子 <transitio ...
- Vue基础进阶 之 列表过渡
在前面的博客我们一直在操作单个元素的过渡,如果是对多个元素过渡,例如列表,这时就要用到<transition-group>这个组件了: 如何使用:将要操作的列表元素放在<transi ...
- vue过渡 & 动画---进入/离开 & 列表过渡
(1)概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animat ...
- Vue多元素过渡
前面的话 前面分别介绍了单元素过渡的CSS过渡和JS过渡,本文将详细介绍Vue多元素过渡 常见示例 最常见的多标签过渡是一个列表和描述这个列表为空消息的元素: <transition> & ...
随机推荐
- Java中设置classpath、path、JAVA_HOME的作用?
1.classpath是用来找编译后的class文件的,操作系统或者编译器等会在这些目录下寻找对应的.class文件 2.path时用来找命令行执行文件的,操作系统或者其他软件会在这些目录下找对应的命 ...
- 使用weinre调试手机页面
阅读目录 介绍Weinre 安装Weinre 通过Weinre调试页面 启动target 介绍Weinre Weinre(Web Inspector Remote),是一种远程调试工具.功能与Fire ...
- XSS之浪潮已经来临
前些天和Roy厉在微博上聊到微信公众账号,我说我在辛苦运营“网站安全中心”这个账号呢,他说我这账号粉丝少是少了点,不过用户定位精确,我说我不希望精确,因为我在尽可能写科普,科普需要传播. Roy厉说过 ...
- LINUX下渗透提权之嗅探技术
内网渗透在攻击层面,其实更趋向于社工和常规漏洞检测的结合,为了了解网内防护措施的设置是通过一步步的刺探和经验积累,有时判断出错,也能进入误 区.但是如果能在网内进行嗅探,则能事半功倍,处于一个对网内设 ...
- 3D游戏图形技术解析(7)——视差映射贴图(Parallax Mapping)【转】
http://www.cnblogs.com/taotaobujue/articles/2781371.html 视差映射贴图(Parallax Mapping) ● 传统纹理贴图的弊端 纹理贴图大家 ...
- windows 服务器不能使用剪贴板解决办法
您可以在系统资源中先结束rdpclip.exe进程,然后重新打开c:\windows\system32\rdpclip.exe即可
- python 实现计算数独
输入文件格式: 008309100900060004007504800036000540001000600042000970005907300600010008004608200 输出结果: yuan ...
- 《深入理解Java虚拟机》笔记7
组内有人问我,她写的程序总是在短时间内就jvm异常. 另外,debug时候又可以正常通过,写的逻辑并不复杂, 只是用poi检索Excel.第一反应还是程序可能写的有问题, 也许写了一个jvm未预测的错 ...
- needtrue需要真实的答案
现在从底层做起来,相当的不容易啊,无论是哪个行业,每个人都需要付出很多的努力.但是现在人们的心是浮躁的,都想一下得到自己想要的东西,钱也好,车也好,房子也好,女人也好.最近很喜欢两句话,这里写下来与大 ...
- 更改Mysql数据库存储位置
默认安装位置 C:\Program Files\MySQL\MySQL Server 5.7 一.首先把mysql的服务先停掉. 二.更改MySQL配置文件My.ini中的数据库存储主路径 打开MyS ...