一:原因
UI设计师对接时提出的优化.展开更多,删除,收藏,都需要做过渡效果。
做购物车页面,勾选进购物车的商品列表可删除,但是删除调完接口刷新数据, 消失的太突兀了,所以要优化一下。
二:思路
1.完成页面结构及 添加数据和删除数据逻辑
2.包裹列表使用transition-group标签,将该有的类名加上。这样写了效果是有了,但是过渡比较生硬,如何让它平滑一点?
3.加v-move类名
三:实现
<template>
<div id="app">
<button @click="addItem">添加数据项</button>
<ul>
<transition-group name="slide">
<li v-for="(item, index) in list" :key="item" @click="removeItem(index)">{{item}}</li>
</transition-group>
</ul>
</div>
</template>
<style lang="scss" scoped>
.slide-enter, .slide-leave-to {
}
.slide-leave, .slide-enter-to {
}
.slide-enter-active {
animation: slide-in 2s ease-out;
}
.slide-leave-active {
animation: slide-out 2s ease-out;
/* 这里在离开的时候,需要让这个元素脱离标准流,不然后面的元素动不了 */
position: absolute;
}
/* 想要让动画平滑一点,需要加v-move的类名,v-可以别name的值 */
.slide-move {
transition: all 2s;
}
@keyframes slide-in {
from {
transform: translateY(50px)
}
to {
transform: translateY(0)
}
}
@keyframes slide-out {
from {
transform: translateY(0)
}
to {
transform: translateY(50px)
}
}
</style>
四:注意点
v-for="(item, index) in list" :key="item"
这里的Key不要绑定dnex,否则会有bug 控制台也会提示报错。
问题出在循环生成列表项时绑定的key值上,因为key是vue框架用来标识节点唯一性的,当使用index作为key值时,执行删除操作,删除之后的新数组index从1-6变为了1-5,此时,虚拟DOM认为列表项的最后一项需要应用动画效果。所以,改为选用其他属性作为key值,如name(本例中的name属性值无重复)。