Vue基础进阶 之 列表过渡
在前面的博客我们一直在操作单个元素的过渡，如果是对多个元素过渡，例如列表，这时就要用到<transition-group>这个组件了；
如何使用：将要操作的列表元素放在<transition-group></transition-group>内，其他与<transition>基本一致； 注意：在<transition-group>的元素要指定个唯一的 :key 属性
例如：
代码：
<transition name='fade'>
<div v-show="flag" class="mybtn"></div>
<div v-show="flag" class="mybtn"></div> </transition>
提示的错误：
当然用了transition-group还不对
提示错误：子组件需要一个key
注意，它们的key值是数值，如果是一个字符型，需要在其vue代码中定义其属性，将属性定义为数值，当然子组件的key值不能一样的
最终修改后正确的效果：
实现两个组件的代码：
<div>
<button @click="flag=!flag">显示/隐藏</button>
<transition-group name='fade'>
<div v-show="flag" class="mybtn" :key='a'></div>
<div v-show="flag" class="mybtn" :key='b'></div>
</transition-group>
</div>
vue代码：
let vm= new Vue({
data:{
flag:false,
a:'',
b:''
}
}).$mount('div');
总的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>15_列表过渡</title>
<script type="text/javascript" src="../js/vue.js" ></script>
<style> .mybtn{ width: 100px;
height: 100px;
background-color: red;
transform: translateX(50px);
}
.fade-enter-active,.fade-leave-active{
transition: all 2s; }
.fade-enter{
opacity: ;
transform: translateX(0px);
}
.fade-enter-to{
opacity: ;
transform: translateX(50px);
}
.fade-leave{
opacity: ;
transform: translateX(50px);
}
.fade-leave-to{
opacity: ;
transform: translateX(0px);
} </style> </head>
<body>
<div> <button @click="flag=!flag">显示/隐藏</button>
<transition-group name='fade'>
<div v-show="flag" class="mybtn" :key='a'></div>
<div v-show="flag" class="mybtn" :key='b'></div> </transition-group> </div>
</body> <script> let vm= new Vue({
data:{ flag:false,
a:'',
b:'' } }).$mount('div'); </script>
</html>
测试transition-group的使用
小案例
最终效果：
vue代码：
<script>
let vm= new Vue({
data:{
flag:false,
a:'',
b:'',
numArray:[,,,,]
},
methods:{
addNum(){
let num=Math.ceil(Math.random()*);//向上取整
this.numArray.push(num);
},
removeNum(index){
this.numArray.splice(index,);
}
}
}).$mount('div');
</script>
以上代码根据索引删除数字
<div>
<button @click="addNum">添加数字</button>
<transition-group name='fade'>
<li v-for="(item,index) in numArray" :key="item">
{{item}}
<button @click="removeNum(index)">-</button>
</li>
</transition-group>
</div>
在transition-group中默认是tag='span'
用到的样式：
<style>
.fade-enter-active,.fade-leave-active{
position: absolute;
transition: all .5s;
}
.fade-enter{
opacity: ;
transform: translateX(-20px);
}
.fade-enter-to{
opacity: ;
}
.fade-leave{
opacity: ;
}
.fade-leave-to{
opacity: ;
transform: translateX(20px);
}
.fade-move{
transition: transform .5s;
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>15_列表过渡</title>
<script type="text/javascript" src="../js/vue.js" ></script>
<style> .fade-enter-active,.fade-leave-active{
position: absolute;
transition: all .5s; }
.fade-enter{
opacity: ;
transform: translateX(-20px);
}
.fade-enter-to{
opacity: ; }
.fade-leave{
opacity: ; }
.fade-leave-to{
opacity: ;
transform: translateX(20px);
} .fade-move{
transition: transform .5s;
}
</style> </head>
<body>
<div> <button @click="addNum">添加数字</button>
<transition-group name='fade'>
<li v-for="(item,index) in numArray" :key="item">
{{item}}
<button @click="removeNum(index)">-</button> </li> </transition-group> </div>
</body> <script> let vm= new Vue({
data:{ flag:false,
a:'',
b:'',
numArray:[,,,,] },
methods:{
addNum(){
let num=Math.ceil(Math.random()*);//向上取整
this.numArray.push(num);
},
removeNum(index){
this.numArray.splice(index,); }
} }).$mount('div'); </script>
</html>
小案例总的代码
Vue基础进阶 之 列表过渡的更多相关文章
- vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制
前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件 ...
- vue 基础-->进阶 教程(1): 基础（数据绑定）
第一章 建议学习时间4小时 课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...
- vue 基础-->进阶 教程(2): 指令、组件
第二章 建议学习时间4小时 课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...
- Vue基础进阶 之 过渡效果
进入/离开过渡效果:Vue在插入.更新或移除DOM时,可以设置一些动画效果: 如何使用过渡效果:利用<transition></transition>组件将需要应用的过渡效果的 ...
- Vue基础-作用域插槽-列表组件
Vue 测试版本:Vue.js v2.5.13 Vue 官网介绍作用域插槽时, 在 2.5.0+,slot-scope 能被用在任意元素或组件中而不再局限于 <template>. 作用域 ...
- vue 基础-->进阶 教程(2): 指令、自定义指令、组件
第二章 建议学习时间4小时 课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...
- Vue基础进阶 之 自定义指令
自定义指令-----钩子函数 自定义指令 除了内置指令,Vue也允许用户自定义指令: 注册指令:通过全局API Vue.directive可以注册自定义指令: 自定义指令的钩子函数: bind: in ...
- Vue基础进阶 之 实例方法--生命周期
在上一篇博客中我们知道生命周期的方法: 生命周期: vm.$mount:手动挂载Vue实例: vm.$destroy:销毁Vue实例,清理数据绑定,移除事件监听: vm.$nextTick:将方法中的 ...
- Vue基础进阶 之 实例方法
常用的实例方法: 数据: vm.$set:设置属性值: vm.$delete:删除属性值: vm.$watch:观测数据变化: 生命周期: vm.$mount:手动挂载Vue实例: vm.$destr ...
随机推荐
- error MSB3073: 命令“copy /y
编译VC程序时候报错:error MSB3073: 命令“copy /y 查看: 项目的属性->配置属性->生成事件->后期生成事件->命令行: copy /y "$ ...
- 【Static Program Analysis - Chapter 4】格理论(Lattice Theory)与程序分析
# 从一个例子说起, **任务:给定这样一段代码,假设我们想分析出这段代码中,每个数值型变量和表达式的符号,即正数,负数或0.** 此外,还有可能出现两种情况就是: 1.我们无法分析出结果,即我们无法 ...
- java中的动态代理Proxy
动态代理是java语言的一个神奇的地方,不是很好理解,下面来看看关键的地方. InvocationHandler 是一个接口,官方文档解释说,每个代理的实例都有一个与之关联的 InvocationHa ...
- JAVA课程课后作业之使用递归完成回文
一.思路 1.我的想法是利用数组的做法来进行,先是用scanner录入一个String类 2.然后就是将String转化成char数组 3.递归的就是第一个和最后一个对比,然后第一个加一,最后一个减一 ...
- route 配置默认网关
影响Linux系统网络中网关配置信息的3种方式 1.生效文件cat /etc/sysconfig/network-scripts/ifcfg-eth0 GATEWAY=10.0.0.254 <- ...
- Thinkphp路由配置和静态缓存规则【原创】
ThinkPHP框架对URL有一定的规范,所以如果你希望定制你的URL格式的话,就需要好好了解下内置的路由功能了,它能让你的URL变得更简洁和有文化. 首先我们在Common/config.php设置 ...
- [No0000D1]WPF—TreeView无限极绑定集合形成树结构
1.如图所示:绑定树效果图 2.前台Xaml代码: <Window x:Class="WpfTest.MainWindow" xmlns="http://schem ...
- .net 问题
1.socket初始化三个步骤 2.多线程 3.mvc的理解
- 最全的MonkeyRunner自动化测试从入门到精通（7）
jython-installer-2.5.3.jar安装步骤步骤一:Jython的安装比较简单,Jython的安装程序本身就是一个Java应用程序,因此,在安装之前,你必须具备Java运行的环境. 步 ...
- 深度学习基础（二）AlexNet_ImageNet Classification with Deep Convolutional Neural Networks
该论文是深度学习领域的经典之作,因为自从Alex Krizhevsky提出AlexNet并使用GPUs大幅提升训练的效率之后,深度学习在图像识别等领域掀起了研究使用的热潮.在论文中,作者训练了一个含有 ...