第三十三篇 transition-group 列表过渡
上一篇内容讲到的是transiotion,其中还记得有一个报错吗?如下:
先来回顾一下,<transition> 只能用于单个元素,如果在<transition>单中并列两个<p>标签,那么这样一来就会报以上这个错误;那么可以通过一个div将两个<p>标签进行一个包裹,那么两个<p>标签只能是"同生共死",依然还是单个元素;多元素的过渡是一种什么状态呢?"有我没你"的状态,即并列的两个<p>标签,可以通过 v-if 和 v-else 这种方式并列,那么这样如果是同标签的话,结果在上篇内容得以验证并不能够进行过渡动画,这里可以通过设置key的方式;那么transition - group是用于列表,下面来通过一个场景来了解transition-group:
transition-group 场景
通过下面这个场景"备忘录"来进行讲解:
现在先完成去除动画效果的备忘录,能够实现将input通过点击添加然后渲染在下面,这样的效果通过之前内容篇目的讲解基本都能够实现下来,代码如下:
<div id="app"><h2>备忘录</h2><div class="write"><input type="text" v-model="mycont" /><button @click="addCont">添加</button></div> <div class="content"><!-- 暂无添加内容显示 --><div v-if="contList.length===0"><ul><li>暂无内容添加</li></ul></div><!-- 已有内容显示 --><div v-else><ul><li v-for="(item,index) in contList" :key="index"> {{item}}</li></ul></div></div> </div><script>new Vue({el:'#app',data:{mycont:'',contList:[]},methods:{addCont(){this.contList.push(this.mycont);this.mycont = '';}}})
</script>
完成以上的一个内容后,接下来就是要完成本篇的主要内容,通过 transition-group 实现列表过渡,点击 "添加" 后内容就缓缓从右边进入然后将内容显示出来;
css class
.li-enter-active{animation: move 1.5s;
}
.li-leave-active{animation: move 1.5s reverse;
}
@keyframes move{0%{opacity: 1;transform: translateX(100px);}100%{opacity: 0;transform: translateX(0px);}
}
页面:<transition-group>
<!-- 已有内容显示 -->
<div v-else><ul><transition-group name="li"><li v-for="(item,inex) in contList" :key="index"> {{item}}</li></transition-group></ul>
</div>
效果:
这又是为什么呢?在页面当中我们使用了这样的一个 v-if 和 v-else ,当我未添加任何记录的时候v-else的内容是没有被创建出来的,当添加第一个的时候<transition-group>才有被创建出来的,所以第一个<li>并没有效果,从第二开始才有这个效果;所以用在这里使用v-if和v-else是不太合适的,可以去掉 v-if 和v-else的内容进行测试一下;
<div id="app"><h2>备忘录</h2><div class="write"><input type="text" v-model="mycont" /><button @click="addCont">添加</button></div> <div class="content"><div><ul><li v-for="(item,index) in contList" :key="index"> {{item}}</li></ul></div></div> </div>
下面再添加一个"删除"按钮,当我点击 "删除" 按钮时候点击的时候那么对应的内容也就会被移除掉,也即使 .content-leave-active 的效果:
思路:通过索引的方式来删除对应的备忘记录;
<!-- 已有内容显示 -->
<div><ul><transition-group name="li"><li v-for="(item,index) in contList" :key="index"> {{item}}<button @click="delCont(index)">| 删除</button></li></transition-group></ul>
</div>...
methods:{delCont(index){this.contList.pop(index);}
}
效果:
如果是按顺序来删除的话,并没有发现有什么问题,但如果删除中间的中午,会发什么以下的这种情况:
它的动画效果是最后一个,不应该是中午被移除的动画效果吗?这又是为什么呢?同样的在讲到key值的时候就讲到过这个缘由;下面通过一张图的方式来解读:
那么对于key的设置的内容可以看一下往期的这篇内容,( 附上地址:key值设置 )
那么于此同时也可以看一下控制台会有这样的提示信息,提示不建议使用这个index做它的key;
[Vue tip]: Do not use v-for index as key on <transition-group> children, this is the same as not using keys.(found in <Root>)
设置key值最好就是能够保证它的一个唯一性,提供唯一的key属性值,编写测试一下删除动画:
<div><ul><transition-group name="li"><li v-for="(item,index) in contList" :key="item"> {{item}}<button @click="delCont(index)">| 删除</button></li></transition-group></ul>
</div>
测试效果:
这下我们的效果内容就正常了,能够正常的实现删除的动画效果,它是通过key进行对比,然后删除对应key值的内容;下面来看一下它对应的DOM结构:
transition-group 默认
<transition-group> 不同于 transition 是 transition 会以一个真实元素呈现:默认为一个span标签 : <span> ;可以通过tag特性来更换其他元素;
下面可以利用tag,将 <transition-group> 变换成 <ul>,那么原先的ul就可以去掉了;
<transition-group name="li" tag="ul"><li v-for="(item,index) in contList" :key="item"> {{item}}<button @click="delCont(index)">| 删除</button></li>
</transition-group>
以上就是本篇目的内容了,通过学习transition和transition-group,了解两者之前的一些区别以及对应能够实现的效果;本篇内容可以结合这几篇内容:
附上链接:
第二十九篇 动态组件 - component
第三十二篇 transition 过渡动画
第三十三篇 transition-group 列表过渡相关推荐
- Android UI开发第三十三篇——Navigation Drawer For Android API 7
Creating a Navigation Drawer中使用的Navigation Drawer的android:minSdkVersion="14",现在Android API ...
- 第三十三篇,网络编程TCP协议通讯过程实现和函数接口
网络编程知识点概览 ======================================== 1.核心知识点 传输层的两个重要协议 tcp协议: ...
- 第三十三篇、富文本 NSMutableAttributedString
// 设置颜色等NSMutableDictionary *arrDic = [NSMutableDictionary dictionary];arrDic[NSForegroundColorAttri ...
- “约见”面试官系列之常见面试题第三十三篇之事件委托(建议收藏)
目录 概述 引入原因 具体写法 适用场景 概述 "事件处理程序过多"问题的解决方案就是事件委托,利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 事件冒泡:由 ...
- IntelliJ IDEA快速入门 | 第三十三篇:在IntelliJ IDEA中如何进行断点调试呢?
断点调试是程序员的一个基本技能,有多重要不用我再说了吧
- 三十三、Java集合中的LinkedList
@Author:Runsen @Date:2020/6/3 作者介绍:Runsen目前大三下学期,专业化学工程与工艺,大学沉迷日语,Python, Java和一系列数据分析软件.导致翘课严重,专业排名 ...
- [Python从零到壹] 三十三.图像处理基础篇之什么是图像处理和OpenCV配置
欢迎大家来到"Python从零到壹",在这里我将分享约200篇Python系列文章,带大家一起去学习和玩耍,看看Python这个有趣的世界.所有文章都将结合案例.代码和作者的经验讲 ...
- LINUX学习基础篇(三十三)系统资源
LINUX学习基础篇(三十三)系统资源 系统资源查看 vmstat命令监控系统资源 dmesg显示开机时内核检测信息 free命令查看内存使用状态 查看CPU信息 查看内存信息 查看当前登录的用户 u ...
- Vue 中多个元素、组件的过渡,及列表过渡
多个元素之间过渡动画效果 多元素之间如何实现过渡动画效果呢?看下面代码 .fade-enter, .fade-leave-to{opacity: 0; } .fade-enter-active, .f ...
最新文章
- LightOJ 1030 【概率DP求期望】
- 每天一个linux命令(17):whereis 命令
- idea快速写出for循环
- 1.15 实例内部类
- 2014年英语一作文partB漫画作文
- POJ 1845 Sumdiv 【逆元】
- MYSQL语句:创建、授权、查询、修改、统计分析等 一 用户的创建、权限设置、删除等...
- iframe中加载html页面,jQuery - 动态创建iframe并加载页面
- k3服务器重装系统,金蝶K3安装教程07:K3 WEB系统配置工具
- CNNIC:第35次中国互联网络发展状况统计报告
- 自控原理学习笔记---控制系统稳定性分析
- C++和数据结构考试总结
- 以后有面试官问你「密码学」,你就把这篇文章扔给他
- prod和probor在matlab,智能控制讲义第六章Matlab在模糊控制中的应用.
- XGBoost导读与实战阅读记录(一)——rabit和allreduce
- div css经典布局实例,div+css布局实例:常用图文混排(一)--腾讯图文 - 蜗爱CSS
- 感谢米老师,感谢提高班,做个骄傲的自己
- 情态动词can与could的用法详解
- C语言进阶——字符函数和字符串函数
- linux查看dns命令