Vue 列表上下过渡效果的实例代码
最近有个需求,一个列表上下移动要有简单过渡效果,在网上找了找没找到,可能是我搜的关键词不对?
试了试 Vue 的 transition-group
,也没有达到预期的效果,然后就花了点时间做了一个操作Demo。
最终效果
某列的数据由 X 位置上升到 Y 位置的过渡效果
技术点 visibility: hidden v-for key 这么简单的实现哪有什么技术点,哈哈哈 实现方式
这个过渡效果一共由三部分组成:
在 Y行
位置插入 X行
位置的数据,添加一个高度展开效果,并使该行的数据不可见 X行
数据不可见, 并添加一个高度收起效果 原地克隆 X行
的DOM, 设置为固定定位 fixed
, top
取X行距离 body
的位置( offsetTop
), 并做一个向上移动效果到 Y行
位置
来看一个放慢版的效果,加了个边框并且没有设置 visibility
属性,看的会更明了:
简单说一下。
第一部分描述一个让目标位置底下所有行有一个向下移动的过程。
第二部分描述那个移动的行消失的过程。
第三部分描述一个移动的过程。
为了不污染数据渲染出来的视图,除了固定定位的那个盒子是直接操作DOM,之外的两个效果是通过操作数据+类名实现的。
遇到的问题 图片闪烁问题
原因:由于 v-for 的时候给每行的 key
是 index
,数据源发生变化后会导致受影响的元素的 index
也发生改变。
解决:将 key
的值由 index
更换为 item
(唯一值, 在这里 item
指的是图片url) 。
频繁更新数据问题
当位置频繁改变的时候要清除上一次的动画遗留元素,不然元素会发生各种错乱,这个很容易想的到,错误演示就不录了,看一下完成的效果。
Duplicate keys detected
原因:第一部分插入 X行
数据造成,因为两条相同的数据重复的 item
会造成重复的 key
。
解决:在进行第一部分的时候将原来那一行的 key
改为其它值。
<li :key="closeIndex === index ? Date.now() : item"></li>
我用的时间戳,其实理论上来讲只要能保持唯一写什么都可以,反正这一行数据将在动画结束后从数据中删除。
总结
以上所述是小编给大家介绍的Vue 列表上下过渡效果的实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
相关推荐
-
Vue中多个元素、组件的过渡及列表过渡的方法示例
多个元素之间过渡动画效果 多元素之间如何实现过渡动画效果呢?看下面代码 .fade-enter, .fade-leave-to{ opacity: 0; } .fade-enter-active, .fade-leave-active{ transition: opacity 3s; } <div id="root"> <transition name="fade"> <div v-if="show">hell
-
vue的列表交错过渡实现代码示例
交错过渡效果 花里胡哨,华而不...真香 基于vue的,需要你对 vue 的 transition 和 transition-group有过使用和了解. transition vue的文档对 transtion 组件已经有了很详细的 分析了. 这里说一下我的理解: transtion 是vue提供的一个抽象组件,会在 合适的时机 帮我们操作其包裹的子元素. 这个合适的时机是: beforeEnter dom 从 js 生成,并刚插入页面的 那一帧(对应下图的动画开始) enter dom 插入页
-
详解Vue学习笔记进阶篇之列表过渡及其他
本文将介绍Vue中的列表过渡,动态过渡, 以及可复用过渡是实现. 列表过渡 目前为止,关于过渡我们已经讲到: 单个节点 同一时间渲染多个节点中的一个 那么怎么同时渲染整个列表,比如使用 v-for ?在这种场景中,使用 <transition-group>组件.在我们深入例子之前,先了解关于这个组件的几个特点: 不同于 <transition>, 它会以一个真实元素呈现:默认为一个<span>.你也可以通过 tag 特性更换为其他元素. 内部元素 总是需要 提供唯一的
-
Vue 列表上下过渡效果的实例代码
最近有个需求,一个列表上下移动要有简单过渡效果,在网上找了找没找到,可能是我搜的关键词不对? 试了试 Vue 的 transition-group ,也没有达到预期的效果,然后就花了点时间做了一个操作Demo. 最终效果 某列的数据由 X 位置上升到 Y 位置的过渡效果 技术点 visibility: hidden v-for key 这么简单的实现哪有什么技术点,哈哈哈 实现方式 这个过渡效果一共由三部分组成: 在 Y行 位置插入 X行 位置的数据,添加一个高度展开效果,并使该行的数据不可见
-
Vue仿手机qq的实例代码(demo)
vue简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue 学习起来非常简单,本教程基于 Vue 2.1.8 版本测试. 概述 这是一个16年9月份找的开源项目源代码,结合自己的实际情况进行的修改项目,以后内容将会有很大的不同,项目的目标是向QQ看齐 页面效果展示 免责声明 本项目为开源项目,如有类同,纯属巧合.
-
vue+Element-ui实现分页效果实例代码详解
当我们向后台请求大量数据的时候,并要在页面展示出来,请求的数据可能上百条数据或者更多的时候,并不想在一个页面展示,这就需要使用分页功能来去完成了. 1.本次所使用的是vue2.0+element-ui实现一个分页功能,element-ui这个组件特别丰富,分页中给我提供了一个Pagination 分页,使用Pagination 快速完成分页功能 最终效果展示 <div class="deit"> <div class="crumbs"> &l
-
vue中使用GraphQL的实例代码
上篇给大家介绍了Java 使用 Graphql 搭建查询服务详解.这里我们讲讲如何在Vue中使用GraphQL. 1. 初始化vue项目 npm install -g @vue/cli vue create vue-apollo-demo 选择默认cli的默认模板就可以了 添加 /src/graphql/article.js . /src/utils/graphql.js 两个文件. ├── node_modules └── public │ ├── favicon.ico │ └── inde
-
使用vue重构资讯页面的实例代码解析
从我接手到将这个页面代码重构前,一直都还是使用angular1的代码去做的,需求来了也是用angular去实现:作为一个憧憬新技术的前端,怎么忍受得了现在还在使用这么有历史感的框架,所以,以前就一直在酝酿着如何将angular重构成vue. 代码结构设计 这个资讯项目代码整体都是使用angular.js来去实现的,而此次想重构的资讯详情页面只是其中的一个页面,所以新建了一个文件夹 /newApp .作为以后新技术的文件夹,以后使用vue技术的都放在这个文件夹下,区别于原先文件夹 /app . 在
-
新手vue构建单页面应用实例代码
本文介绍了新手vue构建单页面应用实例代码,分享给大家,具体如下 步骤: 1.使用vue-cli创建项目 2.使用vue-router实现单页路由 3.用vuex管理我们的数据流 4.使用vue-resource请求我们的node服务端 5.使用.vue文件进行组件化的开发 一.目录结构: 二.搭建项目 先安装 vue-cli: sudo npm install -g vue-cli 使用vue-cli构建初始化项目:vue init webpack project(创建webpack项目并下载
-
基于JS实现新闻列表无缝向上滚动实例代码
当新闻较多,并且空前有限的时候,使用滚动是一个不错的选择,本章节就通过代码实例介绍一下如何实现此效果. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>文字列表无缝向上滚动代码<
-
基于vue 实现token验证的实例代码
vue-koa2-token 基于vue的 做了token验证 前端部分(对axios设置Authorization) import axios from 'axios' import store from '../store' import router from '../router' //设置全局axios默认值 axios.defaults.timeout = 6000; //6000的超时验证 axios.defaults.headers.post['Content-Type'] =
-
Vue隐藏显示、只读实例代码
1.Vue隐藏显示 <div style="padding-top:5px;" v-bind:class="{hidden: isHidden }"> <label class="inline"> <input id="id-button-borders" checked="" v-model="user.userstate" type="chec
-
vue超时计算的组件实例代码
需要对预约单进行超时计算,但是后台和客户端时间不能保证一定一直,所以后台返回客户提交时间和请求结束时间的时间差进行计算. 效果如下(此处只是demo效果,所以有点丑.) 父页面 <template> <div> <div class="dateDiv" :key="index" v-for="(item,index) in TimeArray"> <p>{{item.name}}</p>
随机推荐
- ASP.NET中的几种弹出框提示基本实现方法
- java 文件大数据Excel下载实例代码
- iOS启动页倒计时跳过按钮功能
- Swift中初始化方法的顺序介绍
- 原生js实现倒计时--2018
- 理解和运用JavaScript的闭包机制
- JS实现多物体缓冲运动实例代码
- Python 爬虫学习笔记之多线程爬虫
- LNMP下使用命令行导出导入MySQL数据库的方法
- Android中Fragment与Activity的生命周期对比
- jquery拼接ajax 的json和字符串拼接的方法
- Oracle除去数据中的换行符以免读取出现问题
- js使用for循环及if语句判断多个一样的name
- 微信小程序富文本渲染引擎的详解
- Android TextView使用SpannableString设置复合文本的方法详解
- java实现连接mysql数据库单元测试查询数据的实例代码
- 使用Python的Tornado框架实现一个Web端图书展示页面
- C#文件后缀名的详细介绍
- java 串口通信实现流程示例
- 原生JS实现DOM加载完成马上执行JS代码的方法