<template>
  <div>
    <button @click="addItem">添加项</button>
    <transition-group name="list" tag="ul">
      <li v-for="item in list" :key="item.id" @click="removeItem(item)">
        {{ item.text }}
      </li>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ]
    };
  },
  methods: {
    addItem() {
      const newItem = {
        id: this.list.length + 1,
        text: `Item ${this.list.length + 1}`
      };
      this.list.push(newItem);
    },
    removeItem(item) {
      const index = this.list.indexOf(item);
      if (index !== -1) {
        this.list.splice(index, 1);
      }
    }
  }
};
</script>

<style>
.list-enter-active, .list-leave-active {
  transition: transform 0.5s;
}
.list-enter, .list-leave-to {
  transform: translateY(30px);
  opacity: 0;
}
</style>