Vue 删除列表项的淡出动画

使用vue前端框架尝试做一个购物车页面，勾选进购物车的商品列表可删除，代码如下：

**<template>部分**
<div class="goods-list-wrap"><transition-group name="list-complete"><div class="J-shoping-list" v-for="(item, index) in goodsList" :key="index"><img :src="item.img" /><div class="J-shoping-list-a"><p>{{item.price}}</p><p><span class='goods-list-num'>{{item.num}}</span><span class='goods-list-price'>$ {{item.num * parseInt(item.price) || 0}}</span></p></div><i class="el-icon-close goods-del-icon" @click="removeItem(item,index)"></i></div></transition-group>
</div>**<script>部分**
data:function(){return {goodsList:[{name: "apple", price: "5.00", num: "2", img: "/static/test/1.jpg"},{name: "pear", price: "3.00", num: "1", img: "/static/test/2.jpg"},{name: "grape", price: "7.90", num: "5", img: "/static/test/3.jpg"},{name: "lemon", price: "2.50", num: "3", img: "/static/test/4.jpg"},{name: "banan", price: "1.90", num: "7", img: "/static/test/5.jpg"},{name: "cherry", price: "8.89", num: "2", img: "/static/test/6.jpeg"},]}
},
methods:{removeItem(ele,idx) {this.goodsList.splice(idx, 1);},
}**<style>部分（节选）**
.J-shoping-list {transition: all 1s;
}
.list-complete-enter, .list-complete-leave-to{opacity: 0;transform: translateY(30px);
}
.list-complete-leave-active {position: absolute;
}

代码部分完成之后，测试过程中出现了如下问题：

动画效果是有了，但是不管删除哪一项，动画都作用在最后一个列表项。
通过查阅资料，发现问题出在循环生成列表项时绑定的key值上，因为key是vue框架用来标识节点唯一性的，当使用index作为key值时，执行删除操作，删除之后的新数组index从1-6变为了1-5，此时，虚拟DOM认为列表项的最后一项需要应用动画效果。所以，改为选用其他属性作为key值，如name（本例中的name属性值无重复）。
<div class="J-shoping-list" v-for="(item, index) in goodsList" :key="index">
改为

<div class="J-shoping-list" v-for="(item, index) in goodsList" :key="item.name">

修改之后的动画效果为：

成功～撒花(^_)∠※

Vue 删除列表项的淡出动画相关推荐

Vue默认插槽、具名插槽、作用域插槽及使用作用域插槽删除列表项
Vue默认插槽.具名插槽.作用域插槽及使用作用域插槽删除列表项 1. 默认插槽父组件标签内写的所有内容都放在插槽中父组件: <h1>我是父组件</h1><base-b ...
微信小程序实现列表项左滑删除效果
效果图片 WXML <view class="container"><view class="address&q ...
【STM32】FreeRTOS列表和列表项详解
00. 目录文章目录 00. 目录 01. 概述 02. 列表 03. 列表项 04. 列表相关宏 05. 列表相关函数 5.1 初始化列表 5.2 初始化列表项 5.3 列表项插入函数 5.4 列 ...
FreeRTOS的列表和列表项
列表和列表项列表列表是FreeRTOS中的一个数据结构,概念上和链表有点类型,是一个循环双向链表,列表被用来跟踪FreeRTOS中的任务.列表的类型是List_T,具体定义如下: typedef ...
Android仿ios二级菜单侧滑,仿IOS的列表项滑动菜单——ListItemMenu
一个简单的仿IOS的列表项滑动菜单(也不知道怎么描述比较好). 顺手做出来的小东西,就分享给大家了. 仿iOS列表项滑动菜单: 1.滑动出现菜单,越界阻尼效果: 2.删除列表项效果. GitHub地址 ...
list vue 删除后页面渲染_Vue项目中v-for数组删除第n项元素产生渲染错误问题及解决方法...
项目背景最近使用Vue(版本2.9)开发一个项目时,要生成表单列表,所以使用了v-for来做循环,循环里的元素(item)是一个子组件.同时每个元素都有删除按钮,点击后删除当前元素. 初始代码如下: ...
如何从 Python 列表中删除重复项
def my_function(x):return list(dict.fromkeys(x))mylist = my_function(["a", "b", ...
如何在保留订单的同时从列表中删除重复项？
是否有内置的程序在保留顺序的同时从Python列表中删除重复项? 我知道我可以使用集合来删除重复项,但这会破坏原始顺序. 我也知道我可以这样滚动自己: def uniq(input):output = ...
从Dart列表中删除重复项的2种方法
本文向您展示了从 Flutter 中的列表中删除重复项的 2 种方法.第一个适用于原始数据类型列表.第二个稍微复杂一些,但适用于map****列表或对象列表. 转换为 Set 然后反转为 List 这 ...

Vue 删除列表项的淡出动画

Vue 删除列表项的淡出动画相关推荐

最新文章

热门文章