学习Vue3 第二十章（内置组件-TransitionGroup）

<template>
  <button @click="handleClick">切换</button>
  <button @click="del">删除</button>
  <transition-group
    enter-active-class="animate__animated animate__lightSpeedInRight"
    leave-active-class="animate__animated animate__lightSpeedOutRight"
  >
    <div v-for="item in arr" :key="item">{{ item }}</div>
  </transition-group>
</template>
<script setup>
import { ref, reactive } from 'vue'
import 'animate.css'

const arr = reactive([1, 2, 3, 4, 5])

const handleClick = () => {
  arr.push(arr.length + 1)
}

const del = () => {
  arr.pop()
}
</script>

<style scoped></style>