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 list" del(i) 传参不传id，改成i ，这个是什么用法？
<style>
li{
border: 1px dashed #999;
margin: 5px;
padding: 5px;
line-height: 25px;
font-size: 12px;
width: 800px;
}
li:hover{
background-color: hotpink;
transition: all 0.8s ease;
}
.v-enter,.v-leave-to {
/* .v-enter, .v-leave-to 设置的过渡样式
自动赋给transition 或 transitiongroup标签了 */
opacity: 0;
transform: translateY(80px);
}
.v-enter-active, .v-leave-active {
/* .v-enter-active, .v-leave-active 设置的过渡样式
自动赋给transition 或 transitiongroup标签了 */
transition: all 0.6s ease;
}
.v-move{
transition: all 0.6s ease;
}
/* v-move 特性。会在元素的改变定位的过程中应用。
比如列表中有元素被删除,其他元素会上移
设置了v-move就会在这起作用. */ .v-leave-active{
position: absolute;
/* 当元素设置了 absolute 后，默认就不是100%的宽度了，而是内容多宽就是多宽
所以要给li元素设置一下宽度. */
}
/* 用splice删除数组的元素，由于删除的元素经历了一个过渡，始终占据文档流的这个位置，
因此下一个元素要等待其过渡消失后再移动过来，造成一个生硬的效果。 要达到平滑过渡，就要在删除元素leave-active阶段,
用position:absolute 让删除的元素脱离文档流，后面的元素才能同时平滑过渡过来。
*/
</style>
</head>
<body>
<div id="app">
ID:<input type="text" v-model="id">
NAME:<input type="text" v-model="name">
<input type="button" value="添加" @click="add()"> <!-- 通过 appear 特性设置节点的在初始渲染的过渡
也就是页面刚加载的时候，实现过渡动画 -->
<transition-group tag="ul" appear>
<li v-for="(item,i) in list" @click="del(i)" :key="item.id">
<!-- v-for="(item,i) in list"
del(i) 传参不传id，改成i ??? 这个是什么用法-->
{{item.id}} --- {{item.name}}
</li>
</transition-group>
</div> <script>
var vm = new Vue({
el:'#app',
data:{
id:'',
name:'',
list:[
{id:1, name:'赵高'}, // list里用到的id name 等，要先定义在data
{id:2, name:'秦桧'},
{id:3, name:'严嵩'},
{id:4, name:'魏忠贤'}
]
},
methods:{
add(el){
this.list.push({id:this.id, name:this.name});
this.id = this.name = '';
},
del(i){
this.list.splice(i,1); // i 的用法？？
},
},
});
</script>
</body>
VUE笔记 - 列表过渡动画 v-enter, v-leave-to | v-enter-active, v-leave-active | v-move的更多相关文章
- iOS学习笔记-自定义过渡动画
代码地址如下:http://www.demodashi.com/demo/11678.html 这篇笔记翻译自raywenderlick网站的过渡动画的一篇文章,原文用的swift,由于考虑到swif ...
- vue 过渡效果-列表过渡
到目前为止,关于过渡我们已经讲到, 单个节点 同一时间渲染多个节点的一个 那么怎么同时渲染整个列表,比如使用v-if?在这种场景下,使用<transition-group>组件,在我们深入 ...
- vue.js之过渡动画
vue提供了一个封装动画的组件 <transition name="tr"></transition>,将需要执行动画的元素包裹在该组件中,在通过css修改 ...
- Vue.js 之 过渡动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 058_末晨曦Vue技术_过渡 & 动画之过渡的类名
进入/离开 & 列表过渡 点击打开视频讲解更加详细 概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class ...
- Vue - 解决路由过渡动画抖动问题
前言 Vue-Router 作为 Vue 的核心模块,它为我们提供了基于组件的路由配置.路由参数等功能,让单页面应用变得更易于管理.良好的路由管理尤为重要,比如路由拦截.路由懒加载.路由权限等都在开发 ...
- 066_末晨曦Vue技术_过渡 & 动画之多个元素的过渡
多个元素的过渡 点击打开视频讲解更加详细 我们之后讨论多个组件的过渡,对于原生标签可以使用 v-if/v-else.最常见的多标签过渡是一个列表和描述这个列表为空消息的元素: <transiti ...
- vue笔记-列表渲染
用v-for把一个数组对应为一组元素 使用方法:v-for="(item,index) in items"//也可以使用of替代in { items:源数组 item:数组元素迭代 ...
- Vue中Js动画 与Velocity.js 多组件多元素 列表过渡
Vue提供我们很多js动画钩子 写在tansition标签内部 入场动画 @before-enter="" 处理函数收到一个参数(e l) el为这个元素 @enter=" ...
随机推荐
- android图片资源的适配问题
原文: http://hi.baidu.com/weiyousheng/blog/item/c622d701b9dec6c2277fb5cc.html 在之前的版本中,只有一个drawable,而2. ...
- 学习思考：思考>努力
学.习.思.考 学习.思考,这2个词,4个字,其实代表了4个不同的动作:学.习.思.考. 学,就是从外部(他人)获得. 习,就是练习,行动. 思,就是从内部(自己)获得. 考,就是考量,检测. 因此, ...
- 学习《人工智能一种现代的方法（第3版）》中文PDF+英文PDF
学习人工智能概论时,推荐看看<人工智能:一种现代的方法(第3版)>,最权威.最经典的人工智能教材,已被全世界100多个国家的1200多所大学用作教材. 全面性以及结构的安排还是不错的,值得 ...
- centos 7 mongodb4.0 安装配置
1.下载安装 cat <<EOF> /etc/yum.repos.d/mongodb-org-4.0.repo [mongodb-org-4.0]name=MongoDB Repos ...
- QQ空间说说爬虫
QQ空间说说爬虫 闲来无事,写了一个QQ空间的爬虫,主要是爬取以前的说说,然后生成词云. 这次采用的主要模块是selenium,这是一个模拟浏览器的模块,一开始我不想用这个模块写的,但是后面分析的时候 ...
- Spring MVC学习总结（5）——SpringMVC项目关于安全的一些配置与实现方式
目前越来越多的应用和网站,开始注重安全性的问题,关于我们的web项目的几个安全知识点,不得不讲解一下,这里我主要讲述关于tomcat如何支持HTTPS连接访问,RSA公钥和私钥的制作.这个对于我们整个 ...
- IOS基础学习日志(七)利用dispatch_once创建单例及使用
自苹果引入了Grand Central Dispatch (GCD)(Mac OS 10.6和iOS4.0)后,创建单例又有了新的方法,那就是使用dispatch_once函数,当然,随着演进的进行. ...
- HBase 数据库检索性能优化策略
HBase 数据表介绍 HBase 数据库是一个基于分布式的.面向列的.主要用于非结构化数据存储用途的开源数据库.其设计思路来源于 Google 的非开源数据库"BigTable" ...
- HTTP基础知识整理
http请求由三部分组成,分别是:请求行.消息报头.请求正文 HTTP(超文本传输协议)是一个基于请求与响应模式的.无状态的.应用层的协议,常基于TCP的连接方式,HTTP1.1版本中给出一种持续连接 ...
- google dataflow model 论文
http://www.chinacloud.cn/show.aspx?id=24446&cid=17