CODEWITHSUNDEEP
javascriptcssvue.jsvuejs3animate.css
Bernard Borg
Bernard Borg

Reputation: 1382

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

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>

Upvotes: 2

Views: 738

Answers (1)

Kapcash
Kapcash

Reputation: 6929

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

Upvotes: 2

Related Questions