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

Question

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>

Have a look at the think VueUse/Motion If you don't find any good solution to use animate.css you can use VueUse/Motion — nur_riyad
– nur_riyad, Commented Jan 23, 2023 at 10:15

Kapcash · Accepted Answer · 2023-01-23 10:24:14Z

2

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

answered Jan 23, 2023 at 10:24

Kapcash

6,9902 gold badges22 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related