Vue.js -如何在删除任何项目时为列表添加动画

<template>
  <div>
    <transition-group name="fade">
      <div v-for="item in items" :key="item.id" class="list-item">
        {{ item.name }}
        <button @click="removeItem(item)">删除</button>
      </div>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '项目1' },
        { id: 2, name: '项目2' },
        { id: 3, name: '项目3' }
      ]
    };
  },
  methods: {
    removeItem(item) {
      const index = this.items.indexOf(item);
      this.items.splice(index, 1);
    }
  }
};
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.list-item {
  margin-bottom: 10px;
}
</style>