第五章 动画 48：动画-使用transition-group元素实例列表动画
<!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;
} .v-enter,
.v-leave-to{
opacity: 0;
transform: translateY(80px);
} .v-enter-active,
.v-leave-active{
transition: all 0.6s ease;
}
</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>
<li v-for="item in list" :key="item.id">
{{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=''
}
}
});
</script>
</body>
</html>
第五章 动画 48：动画-使用transition-group元素实例列表动画的更多相关文章
- D3.js的v5版本入门教程（第五章）—— 选择、插入、删除元素
D3.js的v5版本入门教程(第五章) 1.选择元素 现在我们已经知道,d3.js中选择元素的函数有select()和selectAll(),下面来详细讲解一下 假设我们的<body>中有 ...
- JS复习第五章
第五章 引用类型 一.Object类型 创建object实例的方式有两种. 第一种是使用new操作符后跟object构造函数,如下所示: ver person = new Object( ) ; pe ...
- jQuery系列 第五章 jQuery框架动画特效
第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...
- 第五章 动画 50 动画-transition-group中appear和tag属性的作用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- css3 transition属性变化与animation动画的相似性以及不同点
下面列子中的2个图片的效果. http://zqtest.e-horse.cn/DongXueImportedCar/assets/mouseOverAnimate.html 第一个为transiti ...
- CSS3中动画属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为改变,使 ...
- CSS3与动画有关的属性transition、animation、transform对比
最近应公司需求,需要用css3做动画,终于把以前一直傻傻分不清楚的三个属性理解了. 索性在这里进行一个简单的对比,加深自己的记忆. 浏览器兼容性 CSS3 transform 属性 Internet ...
- css 动画（二） transition 过渡 & animation 动画
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! translate:平移:是transform的一个属性: transform:变形:是一个静态属性,可以 ...
- css3，transition，animation两种动画实现区别
我们为页面设置动画时,往往会用到transition还有animation以及transfrom属性或者用到js. 其实通常情况下,对于使用js我们更加倾向于使用css来设置动画. transfrom ...
随机推荐
- BCP 数据导出
EXEC master..xp_cmdshell 'BCP test.dbo.name out d:\t_002.txt -c -t -T' EXEC master..xp_cmdshell 'BCP ...
- 简单场景的类继承、复杂场景的类继承（钻石继承）、super、类的方法
1.python子类调用父类成员有2种方法,分别是普通方法和super方法 class Base(object): #基类的表示方法可以多种,Base(),Base,Base(object),即新式类 ...
- Java小技巧：怎么循环日期？
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");try{//起始日期Date start = sdf.parse ...
- CF450A 【Jzzhu and Children】
普通的模拟题这题用一个队列容器来模拟队列元素是pair类型的,first用来存每个小朋友想要的糖数,second用来存小朋友的序号,然后开始模拟,模拟出口是当队列迟到等于1时就输出当前队列里小朋友的序 ...
- priority_queue member function
没有优先队列的dijkstra不算真的dijkstra 所以我又回来补常识了 <1>priority_queue::emplace <7>priority_queue::top ...
- CF 148D Bag of mice 题解
题面 这是我做的第一道概率DP题: 做完后发现没有后效性的DP是真的水: 在这里说主要是再捋顺一下思路: 设f[i][j]表示有i只白鼠,j只黑鼠是获胜的概率: 显然:f[i][0]=1; 然后分四种 ...
- 笛卡尔树--牛客第四场（sequence）
思路: O(n)建一颗笛卡尔树,再O(n)dfs向上合并答案就行了. #define IOS ios_base::sync_with_stdio(0); cin.tie(0); #include &l ...
- 字符串转数组(php版)
思路: 1.判断当前传来的值是否为数组 2.若不是现将传来的值转换为字符串类型 3.判断当前值是否为空 4.若不为空,采用正则进行匹配,如下图 preg_match('/^{.*?}$/', $str ...
- 房地产大佬潘石屹推荐学Python编程，这本从0到1就够了
潘石屹推荐学Python编程,很多人都不相信,他的微博真真切切. 连房地产都开始学Python了,因为要听懂机器,让机器为我所用. 再不学习Python真的晚了!!!! 如何学? 怎么学? 还是推荐高 ...
- js实现复制内容到剪贴板
一. 原生js实现,电脑可以用,手机不可以用 1. 必须是 input元素 才可以使用 <input id="code" type="text" valu ...