Transition component for animations in Vue

Introduction

The Transition component helps you add smooth animations when elements appear, disappear, or change on the page. It makes your app feel lively and polished.

When showing or hiding a menu or popup with a fade effect.

When switching between different views or pages with a slide animation.

When adding or removing items from a list with a smooth transition.

When you want to animate a button or icon on user interaction.

When you want to improve user experience by making changes less abrupt.

Syntax

Vue

<Transition name="fade">
  <element-or-component v-if="condition" />
</Transition>

The component wraps the element or component you want to animate.

The 'name' attribute sets the base class for CSS animations (e.g., 'fade' means CSS classes like 'fade-enter-from').

Examples

This example fades in and out a paragraph when 'show' changes.

Vue

<Transition name="fade">
  <p v-if="show">Hello!</p>
</Transition>

This example slides the menu content in and out.

Vue

<Transition name="slide">
  <div v-if="isOpen">Menu content</div>
</Transition>

Without a name, Vue uses default transition classes.

Vue

<Transition>
  <button v-if="clicked">Clicked!</button>
</Transition>

Sample Program

This component shows a button that toggles a message. The message fades in and out smoothly using the Transition component and CSS classes.

Vue

<template>
  <button @click="toggle">Toggle Message</button>
  <Transition name="fade">
    <p v-if="visible" class="message">Hello, Vue Transition!</p>
  </Transition>
</template>

<script setup>
import { ref } from 'vue'
const visible = ref(false)
function toggle() {
  visible.value = !visible.value
}
</script>

<style scoped>
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.message {
  margin-top: 1rem;
  font-weight: bold;
  color: #2c3e50;
}
</style>

Important Notes

Always pair the Transition component with CSS classes for smooth animations.

Use v-if inside Transition to control when the element appears or disappears.

Test animations in different browsers to ensure consistent behavior.

Summary

The Transition component adds animations when elements enter or leave the page.

Wrap the element with <Transition> and use CSS classes named after the 'name' attribute.

It improves user experience by making changes feel smooth and natural.