How to use the Vue Transitions Component

How to use the Vue Transitions Component

Vue offers built-in <transition> component to apply transition effects and animate DOM easily. It is a special component that we can use to animate anything which is between the opening and closing tag.


Vue offers built-in <transition> component to apply transition effects and animate DOM easily. It is a special component that we can use to animate anything which is between the opening and closing tag.

Only _**_ONE**_ element can animate with the `` component._

You can have multiple elements inside of this <transition> component, but then have to apply conditions of these elements using** v-if** or_ v-show_. We can use the <transition-group> component for multiple components.

Demo Scenario

Alert Notification will appear and slide up after 5 seconds using built-in <transition> component. Here’s an example:

Vue Transition — Alert Notification

There are 6 CSS Transition Classesfor enter/leave transitions according to the latest official documentation. Not neccessary have to define all 6 classes ,depends of what type of transition/animation.

v- prefix is the *default *when use a <transition> element with no name. Here the v- prefix is replaced by slide-fade- prefix, for an example, it will become by slide-fade-enter-from and declare name at the <transition> element opening tag.

<transition name="slide-fade">

There is a reasons for this naming. There have two different animations that are slide for enter transition **and fade for leaving transition** for this demoscenario — Alert Notification.

How Transition Classes work

There are six classes applied to enter/leave transitions.

  1. slide-fade-enter-from: Starting state to enter. Added before the element is inserted, removed one frame after the element is inserted. It triggered by the **`appear` attribute.**
  2. slide-fade-enter-active: Added to element with v-enter-from, removed when the transition/animation finishes. Time duration, delay, and easing curve for the entering transition are defined. For an example, the transition is delayed about 5 seconds to start the animation.

vuejs programming vue web-development javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire Dedicated VueJS Developers

Want to Hire VueJS Developer to develop an amazing app? **[Hire Dedicated VueJS Developers]( "Hire Dedicated VueJS Developers")** on the contract (time/project) basis providing regular...

Vue.js Web App Development | Skenix Infotech

Our expert Vue.js developers follows Agile methodology that delivers high-quality & affordable Vue.js services. Hire Vue.js Developer from Skenix Infotech.

Useful Tools In Vue.js Web Development

Useful Tools In Vue.js Web Development. There are some tools that developers that are just getting started with Vue or sometimes, have experience building with Vue sometimes do not know exist to make development in Vue a lot easier.

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...