Vue offers the v-if and v-for directives that allow you to manipulate elements in the DOM based on certain conditions. In order to animate elements controlled by v-if and v-for, you need to utilize the built-in Transition and TransitionGroup components. But how can you integrate animate.css animations with these Vue components?
For 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>