How to use animate.css animations with Vue's Transition and TransitionGroup components-CodePudding

Vue has the v-if and v-for directives which create/remove the element in the DOM depending on the condition. To animate v-if and v-for, you have to use the Transition and TransitionGroup built-in components respectively. How can I use animate.css's built-in animations with these Vue built-in components?

Example;

<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>

CodePudding user response：

The <Transition> component accepts props to override which class to apply, instead of generate ones from the given name. (See documentation)

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

Example in playground