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

Question

Vue有v-if和v-for指令，它们根据条件在DOM中创建/删除元素。为了动画化v-if和v-for，你必须分别使用Transition和TransitionGroup内置组件。我如何使用animate.css的内置动画与这些Vue内置组件?

例子;

<script setup lang="ts">
import { ref } from "vue";
const isModalVisible = ref<boolean>(false);
</script>

<button @click="() => (isModalVisible = true)">Click Me<button>
<Transition name="I want an animate.css animation here">
<Modal v-if="isModalVisible" />
</Transition>

Answer 1

<Transition>组件接受props来覆盖要应用的类，而不是从给定的name生成。(见文档)

<Transition
enterActiveClass="animate__animated animate__bounce"
>
<Modal v-if="isModalVisible" />
</Transition>

操场示例