第五章 动画 50 动画-transition-group中appear和tag属性的作用
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--1.导入Vue的包-->
<script src=" https://cdn.jsdelivr.net/npm/vue"></script>
<style>
li{
border:1px dashed #999;
margin: 5px;
line-height: 35px;
padding-left: 5px;
font-size: 12px;
}
li:hover{
background-color: hotpink;
transition: all 0.8s ease;
width: 100%;
} .v-enter,
.v-leave-to{
opacity: 0;
transform: translateY(80px);
} .v-enter-active,
.v-leave-active{
transition: all 0.6s ease;
} /*下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果*/
.v-move{
transition: all 0.6s ease;
}
.v-leave-active{
position: absolute;
}
</style>
</head> <body>
<div id="app">
<div>
<label>
Id:
<input type="text" v-model="id">
</label> <label>
Name:
<input type="text" v-model="name">
</label> <input type="button" value="添加" @click="add">
</div>
<!-- <ul> -->
<!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过v-for循环渲染出来的，不能使用transition包裹，需要使用transitionGroup -->
<!-- 如果要为v-for循环创建的元素设置动画，必须为每一个元素设置 :key属性 -->
<!-- 给transition-group 添加appear属性，实现页面刚展出来时候，入场时候的效果 -->
<!-- 通过 为transition-group 元素，设置tag属性，指定transition-group 渲染为指定的元素，如果不指定tag属性，默认，渲染为 span 标签 -->
<transition-group appear tag="ul">
<li v-for="(item,i) in list" :key="item.id" @click="del(i)">
{{item.id}}---{{item.name}}
</li>
</transition-group>
<!-- </ul> -->
</div> <script>
//创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el:'#app',
data:{
id:'',
name:'',
list:[
{id:1,name:'赵高'},
{id:2,name:'秦桧'},
{id:3,name:'严嵩'},
{id:4,name:'魏忠贤'},
]
},
methods:{
add(){
this.list.push({id:this.id,name:this.name})
this.id=this.name=''
},
del(i){
this.list.splice(i,1)
}
}
});
</script>
</body>
</html>
第五章 动画 50 动画-transition-group中appear和tag属性的作用的更多相关文章
- jQuery系列 第五章 jQuery框架动画特效
第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...
- CSS3秘笈：第五章
第五章 层叠管理样式 1.层叠是决定哪些样式属性要被应用到某一个元素的一套规则. 2.最近的祖先样式胜出:浏览器会采用离相关标签最近的样式. 3.直接应用的样式胜出:任何直接应用于指定标签的样式都战 ...
- Programming Entity Framework-dbContext 学习笔记第五章
### Programming Entity Framework-dbContext 学习笔记 第五章 将图表添加到Context中的方式及容易出现的错误 方法 结果 警告 Add Root 图标中的 ...
- 第五章 动画 48：动画-使用transition-group元素实例列表动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第五章 动画 44：动画-使用第三方animate.css类库实现动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- Android群英传笔记——第七章：Android动画机制和使用技巧
Android群英传笔记--第七章:Android动画机制和使用技巧 想来,最 近忙的不可开交,都把看书给冷落了,还有好几本没有看完呢,速度得加快了 今天看了第七章,Android动画效果一直是人家中 ...
- CSS动画 animation与transition
一.区分容易混淆的几个属性和值 先区分一下css中的几个属性:animation(动画).transition(过渡).transform(变形).translate(移动). CSS3中的trans ...
- 学习笔记 第十四章 使用CSS3动画
第14章 使用CSS3动画 [学习重点] 设计2D动画 设计3D动画 设计过渡动画 设计帧动画 能够使用CSS3动画功能设计页面特效样式 14.1 设计2D动画 CSS2D Transform表 ...
- 《Programming WPF》翻译 第8章 4.关键帧动画
原文:<Programming WPF>翻译 第8章 4.关键帧动画 到目前为止,我们只看到简单的点到点的动画.我们使用了To和From属性或者By属性来设计动画--相对于当前的属性值.这 ...
随机推荐
- SICK激光扫描仪LMS511连接通讯
一.设备介绍: 型号:LMS511-10100(DC 24v) 品牌:SICK 操作环境:Windows 10 64bit 软件:SOPAS ET 连接线:串口转网口线(1根/4针 子头),电源线( ...
- 0-1 RSS订阅
RSS订阅 RSS是什么 中文维基百科对RSS的介绍 w3school对RSS的介绍 少数派的RSS介绍 RSS阅读器 Feedly:注册使用即可,一个账号可以订阅200个RSS源,完全足够日常需要 ...
- PTA(Basic Level)1042.字符统计
请编写程序,找出一段给定文字中出现最频繁的那个英文字母. 输入格式: 输入在一行中给出一个长度不超过 1000 的字符串.字符串由 ASCII 码表中任意可见字符及空格组成,至少包含 1 个英文字母, ...
- ORA-00911: invalid character解决方法
今天在搭建VLS系统后,登录系统测试时发现点击菜单提示错误“ORA-00911:???”.网上很多是因为语句中带分号导致的,但是这次是点开菜单就报错,怀疑是字符集设置的问题. 参考网上的解决方案,添加 ...
- Python学习【day02】- Python基础练习题
#!/usr/bin/env python # -*- coding:utf8 -*- # 执行Python 脚本的两种方式 # 答:①在windows的cmd窗口下 > D:/Python/p ...
- 初入JavaWeb（半成品）
2019-10-21 20:51:03 初次进行Javaweb的开发. 要求: 1登录账号:要求由6到12位字母.数字.下划线组成,只有字母可以开头:(1分) 2登录密码:要求显示“• ”或“*”表示 ...
- Java回调实现异步
在正常的业务中使用同步线程,如果服务器每处理一个请求,就创建一个线程的话,会对服务器的资源造成浪费.因为这些线程可能会浪费时间在等待网络传输,等待数据库连接等其他事情上,真正处理业务逻辑的时间很短很短 ...
- k8s 1.9安装
关闭所有节点的selinux.iptables.firewalld systemctl stop iptables systemctl stop firewalld systemctl disable ...
- Docker 数据卷与容器互联
Docker是基于Go语言实现的开源容器项目,Docker让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制, ...
- 进程之multiprocessing模块代码篇
这里再把之前的内容总结和补充一下: 并发和并行: 你在干坏事,来了一个电话,干完坏事再去接电话,说明你既不是并发也不是并行. 你在干坏事,来了一个电话,你接完电话接着干坏事,说明你支持并发 你在干坏事 ...