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 相关文章推荐
了解一点js的Eval函数
Jul 26 Javascript
js实现input框文字动态变换显示效果
Aug 19 Javascript
JS平滑无缝滚动效果的实现代码
May 06 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
Jun 01 Javascript
微信支付 JS API支付接口详解
Jul 11 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 Javascript
Ionic 2 实现列表滑动删除按钮的方法
Jan 22 Javascript
js逆向解密之网络爬虫
May 30 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
Aug 20 Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 Javascript
js实现简单放大镜效果
Mar 07 Javascript
基于小程序请求接口wx.request封装的类axios请求
Jul 02 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不用递归实现无限分级的例子分享
2014/04/18 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
Zend Framework处理Json数据方法详解
2016/12/09 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
如何实现动态删除javascript函数
2007/05/27 Javascript
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
2010/09/10 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
2015/04/12 Javascript
ECharts仪表盘实例代码(附源码下载)
2016/02/18 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
2016/05/11 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
浅谈js中字符和数组一些基本算法题
2016/08/15 Javascript
微信小程序 商城开发(ecshop )简单实例
2017/04/07 Javascript
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
生产制造追溯系统之在线打印功能
2019/06/03 Javascript
[48:54]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第二场 6.3
2018/06/04 DOTA
Python中逗号的三种作用实例分析
2015/06/08 Python
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
怎样使用Python脚本日志功能
2016/08/14 Python
Python 常用 PEP8 编码规范详解
2017/01/22 Python
pandas按若干个列的组合条件筛选数据的方法
2018/04/11 Python
使用python-opencv读取视频,计算视频总帧数及FPS的实现
2019/12/10 Python
基于Django实现日志记录报错信息
2019/12/17 Python
Python 中@property的用法详解
2020/01/15 Python
解决Keras 自定义层时遇到版本的问题
2020/06/16 Python
魅力惠奢品线上平台:MEI.COM
2016/11/29 全球购物
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
生产部经理岗位职责
2013/12/16 职场文书
体育专业学生自我评价范文
2014/01/17 职场文书
创建绿色学校先进个人材料
2014/08/20 职场文书
华清池导游词
2015/02/02 职场文书
投资申请报告
2015/05/19 职场文书
Python pygame实现中国象棋单机版源码
2021/06/20 Python
详解MySQL中timestamp和datetime时区问题导致做DTS遇到的坑
2021/12/06 MySQL
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server