How to Use Animation in Vue: Simple Guide with Examples

In Vue, you use the <transition> component to add animations to elements entering or leaving the DOM. Wrap the element with <transition> and define CSS classes or use JavaScript hooks to animate changes smoothly.

Syntax

The <transition> component wraps the element you want to animate. It automatically applies CSS classes during different animation phases: enter-from, enter-active, enter-to, leave-from, leave-active, and leave-to. You can also use JavaScript hooks for more control.

Basic syntax:

• <transition name="fade">: sets the base name for CSS classes.
• Inside, place the element that appears or disappears.
• Define CSS for classes like .fade-enter-active and .fade-leave-active to control animation timing and style.

vue

<transition name="fade">
  <p v-if="show">Hello Vue Animation!</p>
</transition>

Output

When 'show' is true, the paragraph fades in; when false, it fades out.

Example

This example shows a button toggling a message with a fade animation using Vue's <transition> component and CSS.

vue

<template>
  <div>
    <button @click="show = !show">Toggle Message</button>
    <transition name="fade">
      <p v-if="show">This message fades in and out!</p>
    </transition>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(false)
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
.fade-enter-to, .fade-leave-from {
  opacity: 1;
}
</style>

Output

Clicking the button toggles the paragraph's visibility with a smooth fade animation.

Common Pitfalls

Common mistakes when using Vue animations include:

• Not wrapping the element inside a <transition> component, so no animation happens.
• Forgetting to define the correct CSS classes matching the name attribute.
• Using v-show instead of v-if inside <transition> which only toggles visibility without triggering enter/leave animations.
• Not scoping CSS properly, causing styles to leak or not apply.

Example of a wrong approach and fix:

vue

<!-- Wrong: No transition wrapper -->
<p v-if="show">No animation here</p>

<!-- Right: Wrapped with transition and CSS classes defined -->
<transition name="fade">
  <p v-if="show">Animated message</p>
</transition>

Output

Without <transition>, the element appears/disappears instantly without animation.

Quick Reference

Feature	Description	Example Class
component	Wraps elements to animate on enter/leave
enter-active	Class applied during entering animation	.fade-enter-active
enter-from	Start state for entering	.fade-enter-from
enter-to	End state for entering	.fade-enter-to
leave-active	Class applied during leaving animation	.fade-leave-active
leave-from	Start state for leaving	.fade-leave-from
leave-to	End state for leaving	.fade-leave-to

Key Takeaways

Use the component to animate elements entering or leaving the DOM.

Define CSS classes with the base name matching the name attribute for smooth animations.

Use v-if inside to trigger enter and leave animations properly.

Remember to scope your CSS to avoid style conflicts.

Avoid using v-show for animations that require element insertion/removal.