使用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 删除列表项的淡出动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。