What is a <transition> component in Vue.js?

Key takeaways:

  1. Vue.js <transition> is a versatile tool for adding smooth animations to elements when they are inserted, updated, or removed from the DOM.

  2. Common transitions include fade, slide, and scale, each providing different visual effects.

  3. Vue.js supports modes like in-out, out-in, and default, controlling how elements transition in relation to each other.

  4. With minimal code, transitions can greatly enhance user experience by improving the visual dynamics of Vue.js applications.

Vue.js provides a powerful <transition> component that makes it easy to add smooth transition effects to elements when they are inserted, updated, or removed from the DOM. With just a few lines of code, Vue.js’ <transition> component effortlessly enhances the user interface with smooth animation effects.

Let’s explore a simple example to demonstrate the usage of the Vue.js transition component and discuss different types of transitions.

Getting started with transition component

First, ensure that we have Vue.js included in our project. As shown in the example, we can use a CDN or install it using a package manager like npm or yarn.

<!-- Include Vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

Toggle visibility

Let’s create a simple Vue.js application with a button that toggles the visibility of a paragraph, and we’ll apply a fade-in and fade-out transition effect to the paragraph using the <transition> component.

Code explanation

In the App.vue:

  • Line 4: A button is rendered with a click event listener bound to the toggleVisibility method.

  • Line 8: Within the <transition> component, a <p> element is conditionally rendered using v-if based on the value of isVisible. This element will fade in and out.

  • Line 17: The isVisible data property is initialized as false.

  • Lines 21–22: The toggleVisibility method toggles the value of isVisible between true and false each time the button is clicked.

  • Lines 28–36: CSS transitions for the fade effect are defined:

    • Lines 30–31: .fade-enter-active and .fade-leave-active classes define the transition effect (opacity change) over a duration of 0.5 seconds.

    • Lines 33–34: .fade-enter and .fade-leave-to classes define the initial and final states of the transition, setting the opacity to 0 for fading in and out.

Transitions types

The Vue.js <transition> component supports various types of transitions. In the example above, we used a fade transition, but there are other types we can explore:

  • Fade transition: The fade transition in Vue.js smoothly animates the appearance and disappearance of elements by gradually changing their opacity from fully transparent to fully opaque (fade in) or vice versa (fade out).

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

  • Slide transition: The slide transition in Vue.js smoothly animates the movement of elements, typically by changing their position on the screen, creating a sliding effect when they are inserted, updated, or removed from the DOM.

.slide-fade-enter-active {
  transition: all 0.5s ease;
}
.slide-fade-leave-active {
  transition: all 0.5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}

  • Scale transition: The scale transition in Vue.js smoothly animates the resizing of elements, typically by changing their scale (size), creating an effect where elements grow or shrink as they are inserted, updated, or removed from the DOM.

.scale-enter-active, .scale-leave-active {
  transition: transform 0.5s;
}
.scale-enter, .scale-leave-to {
  transform: scale(0);
}

Transitions modes


In Vue.js, transition modes determine how elements should behave during transition periods. There are four transition modes:

  1. in-out: The current element transitions out first, then after completion, the new element transitions in.

  2. out-in: The current element transitions out, and once complete, the new element transitions in.

  3. Default: Old and new elements transition simultaneously.

Conclusion

The Vue.js <transition> component is a powerful tool for adding dynamic and engaging effects to our web applications. Whether we choose a fade, slide, scale, or other transition, Vue.js provides the flexibility and simplicity we need. Experiment with different types of transitions and durations to enhance the user experience in our Vue.js applications.

Frequently asked questions

Haven’t found what you were looking for? Contact Us

What is the difference between animation and transition?

Animation creates movement by changing CSS properties over time and can define complex sequences with keyframes. Transition, on the other hand, is simpler and applies gradual changes to properties like color or size between two states, triggered by events like a hover or click.

What are the components in Vue.js?

Vue.js components are reusable, self-contained building blocks that define parts of the user interface. Components have their own templates, logic, and styles, and can include data, methods, computed properties, and lifecycle hooks to handle their behavior and appearance.

Is CSS transition or animation?

CSS supports both transitions and animations. Transitions are used for smooth changes between states, while animations allow for more complex sequences defined with keyframes. Each serves a different purpose but both can bring dynamic effects to web elements.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved