Vue 列表上下过渡效果的实例代码


Posted in Javascript onJune 25, 2019

最近有个需求,一个列表上下移动要有简单过渡效果,在网上找了找没找到,可能是我搜的关键词不对?

试了试 Vue 的 transition-group ,也没有达到预期的效果,然后就花了点时间做了一个操作Demo。

最终效果

某列的数据由 X 位置上升到 Y 位置的过渡效果

Vue 列表上下过渡效果的实例代码

技术点 visibility: hidden v-for key 这么简单的实现哪有什么技术点,哈哈哈 实现方式

这个过渡效果一共由三部分组成:

Y行 位置插入 X行 位置的数据,添加一个高度展开效果,并使该行的数据不可见 X行 数据不可见, 并添加一个高度收起效果 原地克隆 X行 的DOM, 设置为固定定位 fixedtop 取X行距离 body 的位置( offsetTop ), 并做一个向上移动效果到 Y行 位置

来看一个放慢版的效果,加了个边框并且没有设置 visibility 属性,看的会更明了:

Vue 列表上下过渡效果的实例代码

简单说一下。

第一部分描述一个让目标位置底下所有行有一个向下移动的过程。

第二部分描述那个移动的行消失的过程。

第三部分描述一个移动的过程。

为了不污染数据渲染出来的视图,除了固定定位的那个盒子是直接操作DOM,之外的两个效果是通过操作数据+类名实现的。

遇到的问题 图片闪烁问题

Vue 列表上下过渡效果的实例代码

原因:由于 v-for 的时候给每行的 keyindex ,数据源发生变化后会导致受影响的元素的 index 也发生改变。

解决:将 key 的值由 index 更换为 item (唯一值, 在这里 item 指的是图片url) 。

频繁更新数据问题

当位置频繁改变的时候要清除上一次的动画遗留元素,不然元素会发生各种错乱,这个很容易想的到,错误演示就不录了,看一下完成的效果。

Vue 列表上下过渡效果的实例代码

Duplicate keys detected

原因:第一部分插入 X行 数据造成,因为两条相同的数据重复的 item 会造成重复的 key

解决:在进行第一部分的时候将原来那一行的 key 改为其它值。

<li :key="closeIndex === index ? Date.now() : item"></li>

我用的时间戳,其实理论上来讲只要能保持唯一写什么都可以,反正这一行数据将在动画结束后从数据中删除。

总结

以上所述是小编给大家介绍的Vue 列表上下过渡效果的实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JavaScript 解析读取XML文档 实例代码
Jul 07 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
May 11 Javascript
jquery ajax post提交数据乱码
Nov 05 Javascript
javascript实现数字+字母验证码的简单实例
Feb 10 Javascript
TypeOf这些知识点你了解吗
Feb 21 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
Mar 26 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
May 24 Javascript
Vue的Flux框架之Vuex状态管理器
Jul 30 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
May 26 Javascript
深入学习js函数的隐式参数 arguments 和 this
Jun 24 Javascript
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
阿望教你用vue写扫雷小游戏
Jan 20 Javascript
JS 封装父页面子页面交互接口的实例代码
Jun 25 #Javascript
微信小程序Echarts图表组件使用方法详解
Jun 25 #Javascript
ES6 Object方法扩展的应用实例分析
Jun 25 #Javascript
ES6 Object属性新的写法实例小结
Jun 25 #Javascript
ES6模板字符串和标签模板的应用实例分析
Jun 25 #Javascript
基于Node.js搭建hexo博客过程详解
Jun 25 #Javascript
Node.js实现简单的爬取的示例代码
Jun 25 #Javascript
You might like
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
用PHP即时捕捉PHP中的错误并发送email通知的实现代码
2013/01/19 PHP
php多个字符串替换成同一个的解决方法
2013/06/18 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
thinkPHP使用pclzip打包备份mysql数据库的方法
2016/04/30 PHP
PHP获取数组中指定的一列实例
2017/12/27 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
理解Javascript_10_对象模型
2010/10/16 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
2014/07/09 Javascript
JavaScript基础知识及常用方法总结
2016/01/10 Javascript
JavaScript关于提高网站性能的几点建议(一)
2016/07/24 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
js初始化验证实例详解
2016/11/26 Javascript
vue.js的安装方法
2017/05/12 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
2017/08/18 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
2018/02/01 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
微信小程序常用赋值方法小结
2019/04/30 Javascript
vue 父组件中调用子组件函数的方法
2019/06/06 Javascript
Python 实现随机数详解及实例代码
2017/04/15 Python
速记Python布尔值
2017/11/09 Python
Python实现PS滤镜Fish lens图像扭曲效果示例
2018/01/29 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
Pytorch反向求导更新网络参数的方法
2019/08/17 Python
django创建超级用户过程解析
2019/09/18 Python
Python的信号库Blinker用法详解
2020/12/31 Python
2020年10款优秀的Python第三方库,看看有你中意的吗?
2021/01/12 Python
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
耐克美国官网:Nike.com
2016/08/01 全球购物
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
英国网上购买肉类网站:Great British Meat
2018/10/17 全球购物
会计实习期自我鉴定
2013/10/06 职场文书
党员批评与自我批评范文
2014/09/23 职场文书
redis实现排行榜功能
2021/05/24 Redis
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis