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 删除列表项的淡出动画的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。