transition-group

<template>

  <div @click="add">add</div>

  <div @click="pop">pop</div>

  transition标签,可以对单个元素进行动画处理,并且只是对元素的添加和删除进行动画处理

  transition-group标签,可以对多个元素进行动画处理,并且只是对元素的添加和删除进行动画处理

  tag是设置transition-group的包裹元素,默认是span

  <transition-group

    tag="div"

    enter-active-class="animate__animated animate__bounceOut"

    leave-active-class="animate__animated animate__bounceIn">

    <div v-for="item in arr" :key="item" class="box">{{ item }}</div>

  </transition-group>

  </template>

 

  <script setup lang='ts'>

  import { reactive } from 'vue'

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

  const add = () => {

    arr.push(arr.length + 1)

  }

  const pop = () => {

    arr.pop()

  }

  </script>

 

  <style scoped lang='scss'>

  .box {

    width: 100px;

    height: 100px;

    background-color: red;

  }

  // 根据transition的name属性,设置动画效果

  .from {

    width: 0px;

    height: 0px;

  }

  .active {

    transition: all 1s ease;

  }

  .to {

    width: 200px;

    height: 200px;

  }

  </style>