如何在Vue的Transition和TransitionGroup组件中使用animate.css动画

前置准备 #

先引入Animate.css：

• 通过npm安装：npm install animate.css，然后在项目入口文件（如main.ts）中导入：import 'animate.css'
• 或者通过CDN引入：在HTML页面头部添加Animate.css的样式文件引用

1. 给v-if元素（Transition组件）加动画 #

Vue的Transition组件无需依赖name属性自动推导类名，直接通过enter-active-class和leave-active-class绑定Animate.css的动画类即可，注意要给目标元素加上Animate.css的基础类animate__animated。

修改你提供的示例如下：

<script setup lang="ts">
import { ref } from "vue";

const isModalVisible = ref<boolean>(false);
</script>

<button @click="() => (isModalVisible = !isModalVisible)">Toggle Modal</button>

<Transition
  enter-active-class="animate__animated animate__bounceIn"
  leave-active-class="animate__animated animate__bounceOut"
>
  <Modal v-if="isModalVisible" />
</Transition>

说明：

• animate__animated是Animate.css的必备基础类，必须添加到需要动画的元素上
• 可根据需求替换animate__bounceIn/animate__bounceOut为其他Animate.css入场/离场动画类，比如animate__fadeIn/animate__fadeOut、animate__slideInRight/animate__slideOutRight等

2. 给v-for列表（TransitionGroup组件）加动画 #

针对v-for渲染的列表，使用TransitionGroup组件实现批量动画，需要注意两个关键点：给每个列表项设置唯一key、指定tag属性（用来渲染真实DOM容器），动画类的绑定方式和Transition组件一致。

示例代码：

<script setup lang="ts">
import { ref } from "vue";

const items = ref([1, 2, 3, 4]);

const addItem = () => {
  items.value.push(items.value.length + 1);
};

const removeItem = () => {
  items.value.pop();
};
</script>

<button @click="addItem">添加项</button>
<button @click="removeItem">移除项</button>

<TransitionGroup
  tag="ul"
  enter-active-class="animate__animated animate__fadeInLeft"
  leave-active-class="animate__animated animate__fadeOutRight"
>
  <li v-for="item in items" :key="item">{{ item }}</li>
</TransitionGroup>

内容的提问来源于stack exchange，提问作者Bernard Borg