29-Vue动画-列表

这一章会用到许多文档中的内容纠正我们给列表添加动画出现的bugs,所以会以文档的形式写bugs模块
https://cn.vuejs.org/v2/guide/transitions.html#列表过渡

效果图.gif

一.bugs

1
问题:改变数据立即清空导致数据改变失效
解决:在方法中定义临时变量
2
问题:li标签只渲染了一个到界面上
解决:

image.png

简单的说就是transition一般只用于包裹一个元素,要渲染用到v-for的列表元素,需要用transition-group标签包裹;另外我们还需要给每一个li标签自定义key属性并赋予唯一的值,需要注意的是,这个值不能是index,也就是列表索引

3
问题:动画第一次不会出现
解决方法:给transition-group添加apear属性
4
问题:列表中的某项从下方离开时,下面的元素只有等离开项完全消失后,才会向上移动
解决方法:

image.png

简单的说,就是必须给需要元素添加v-move类,在类中设置过渡的时间,另外还必须在特定时间点,规定该元素是定位的

image.png

二.代码验证

1.搭建基本页面

image.png
image.png
image.png
清除表单元素默认行为.png

2.添加动画

2.1 添加动画类

image.png

2.2 添加标签和key属性

image.png