博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用vue实现列表动画
阅读量:3986 次
发布时间:2019-05-24

本文共 369 字,大约阅读时间需要 1 分钟。

在实现列表的过渡的时候,如果需要过度的元素,通过v-for渲染出来的,不能使用transition包裹,需要使用transition-group

如果要为v-for循环创建的元素设置动画,必须为每一个元素设置:key属性
transition-gruop的属性
的appear可以实现列表的入场效果
用户在删除列表时使用,将li宽度设置为100%能提升美感
使用tag属性可以指定transition-gruop渲染为指定的元素,不指定的话会默认的渲染为span元素
/使用.v-move和.v-leave-active 配合使用,能够实现列表的后续的元素,渐渐地飘上来的效果/
.v-move{
transition: all 0.6s ease;
}
.v-leave-active{
position: absolute;
}
实例

转载地址:http://uoxui.baihongyu.com/

你可能感兴趣的文章
为什么读了很多书,却学不到什么东西?
查看>>
长文干货:如何轻松应对工作中最棘手的13种场景?
查看>>
关于WebClient超时问题
查看>>
创业公司如何与巨头竞争?利用好这9大优势是关键
查看>>
读书 | 如何像沉迷游戏一样对工作上瘾?
查看>>
如何确保自己的Mac数据安全呢?这里有四个“小秘诀”
查看>>
如何用好碎片化时间,让思维更有效率?
查看>>
第一性原理:戳中问题本质的人是怎么思考的?
查看>>
No.147 - LeetCode1108
查看>>
No.148 - LeetCode771
查看>>
No.172 - LeetCode1301
查看>>
No.173 - LeetCode1304
查看>>
No.174 - LeetCode1305 - 合并两个搜索树
查看>>
No.175 - LeetCode1306
查看>>
No.176 - LeetCode1309
查看>>
No.177 - LeetCode1310
查看>>
No.178 - LeetCode1311
查看>>
Mac:终端实用快捷键
查看>>
FE:http状态码
查看>>
No.182 - LeetCode1325 - C指针的魅力
查看>>