Home / Blog / The Vue 3 Transition Component 101
The Vue 3 Transition Component 101

The Vue 3 Transition Component 101

Daniel Kelly
Daniel Kelly
July 20th 2023

Transitions can greatly enhance the user experience of a web application by adding smooth animations between different states. Vue.js 3 provides a powerful Transition component that simplifies the process of incorporating transitions into your Vue applications. In this article, we will explore how the Vue 3 Transition component works and demonstrate its usage with code examples.

The Vue 3 Transition Component

The Transition component in Vue 3 allows you to apply transitions to elements when they are inserted, updated, or removed from the DOM. It provides a declarative way to define the animation behavior and smoothly transition between different states. The Transition component works by leveraging CSS transitions or animations to achieve these effects.

Basic Usage

To use the Transition component, you need to wrap your target element or component within it. Let's consider a simple example where we want to fade in a paragraph when it is inserted into the DOM:

<script setup>
import {ref, onMounted} from "vue"
const show = ref(false);
</script>

<template>
    <button @click="show = !show" >Toggle Message</button>
  <transition name="fade">
    <p v-if="show">Hello, Vue 3 Transition Component!</p>
  </transition>
</template>

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

In this example, we use the Transition component to define a transition named "fade." Inside the transition, we conditionally render the paragraph based on the value of the show data property. When show becomes true, the paragraph will fade in.

CSS Classes

The Transition component automatically adds and removes CSS classes to the target element during different transition stages. These classes can be used to define the desired animation styles. The CSS classes follow a naming convention based on the transition name and the transition mode (enter/leave).

For example, in the previous code snippet, the following classes are used:

  • fade-enter-active: Applied to the target element during the entire enter transition.
  • fade-leave-active: Applied to the target element during the entire leave transition.
  • fade-enter-from: Applied to the target element one frame after the element is inserted
  • fade-leave-to: Applied to the target element one frame after a leaving transition is triggered

By defining appropriate styles for these classes, you can control the animation properties such as opacity, transform, or height to create the desired transition effect.

Transition Modes

The Transition component supports three transition modes: in-out, out-in, and the default mode.

  • in-out: The new element transitions in first, followed by the old element transitioning out.
  • out-in: The old element transitions out first, followed by the new element transitioning in.
  • Default: Both the old and new elements transition simultaneously.

To specify the transition mode, you can use the mode prop on the Transition component:

<transition name="fade" mode="out-in">
  <!-- Content -->
</transition>

Customizing Transitions

The Transition component also provides additional props and events to customize the transitions further. You can use the appear prop to enable the initial transition when the component is first rendered. The duration prop allows you to control the transition duration.

Plus, you can even listen to events like before-enter, enter, after-enter, before-leave, leave, and after-leave to perform custom actions using JavaScript during different transition stages.

Conclusion

The Vue 3 Transition component is a powerful tool that simplifies the process of adding smooth and visually appealing transitions to your Vue applications.

If you’d like to get hands-on practice using transitions for yourself plus dive deeper into all that’s possible, check out our premium course: Vue.js Transitions and Animations.

In it, we cover all the basics described in this article plus:

  • Providing custom transition classes
  • combining Vue Transitions with Greensock
  • List transitions with the TransitionGroup component
  • One-line transitions with the AutoAnimate plugin
  • plus a whole lot more!

Start learning Vue.js for free

Daniel Kelly
Daniel Kelly
Daniel is the lead instructor at Vue School and enjoys helping other developers reach their full potential. He has 10+ years of developer experience using technologies including Vue.js, Nuxt.js, and Laravel.

Comments

Latest Vue School Articles

How to Access Vue Refs Defined in Script Setup within Unit Tests

How to Access Vue Refs Defined in Script Setup within Unit Tests

Need to access a component’s data defined within script setup? In this article we’ll teach you how! But be warned you probably want to approach your test a little differently.
Daniel Kelly
Daniel Kelly
48 Hours of Unlimited Vue.js Learning: Your Guide to Vue School&#8217;s Free Weekend

48 Hours of Unlimited Vue.js Learning: Your Guide to Vue School’s Free Weekend

Vue School’s Free Weekend is coming! For 48 hours, you’ll get free access to over 1300 lessons across 65 expert courses. Whether you’re a beginner or advanced, this is your chance to explore new Vue.js topics.
Maria Panagiotidou
Maria Panagiotidou

Our goal is to be the number one source of Vue.js knowledge for all skill levels. We offer the knowledge of our industry leaders through awesome video courses for a ridiculously low price.

More than 200.000 users have already joined us. You are welcome too!

Follow us on Social

© All rights reserved. Made with ❤️ by BitterBrains, Inc.