transition-group 的使用

<template lang="html">
  <div class="content">
    <div class="wraps">
      <button @click="add">ADD</button><button @click="pop">POP</button>
      <transition-group
        enter-active-class="animate__animated  animate__bounce"
        leave-active-class="animate__animated animate__flash"
      >
        <div class="item" v-for="item in list" :key="item">
          {{ item }}
        </div>
      </transition-group>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import "animate.css";
const list = reactive<number[]>([1, 2, 4]);
const add = () => {
  list.push(list.length + 1);
};
const pop = () => {
  list.pop();
};
</script>
<style lang="scss">
.wraps {
  display: flex;
  flex-wrap: wrap;
  word-break: break-all;
  border: 1px solid #ccc;
  .item {
    margin: 10px;
    font-size: 20px;
  }
}
</style>