How to create the transitions in Vue

In this tutorial, we are going to learn about Transitions in vuejs with the help of examples.

transition component

Vue provides us a <transition> wrapper component which helps us to apply transitions to html elements whenever an element is added or removed from the dom.

In <transition> component we need to add an attribute called name.

name: The name of the transition CSS class.

whenever we added a name to our transition component vuejs gives us different css classes prefixed with name.

* represents the name of your transition class.

*-enter : Initial state, this class is added one frame before our element is inserted, removed one frame after the element is inserted.

*-enter-active: This class is Applied during the entering phase. Added before an element is inserted, removed when transition/animation finishes. This class can be used to define the duration, delay and easing curve for the entering transition.

-enter-to: Ending state for *-enter class. Added one frame after the element is inserted (at the same time-enter is removed), removed when transition/animation finishes.

*-leave: Added immediately when an element is leaving from the dom, removed after one frame.

*-leave-active: Active state for leave. Applied during the entire leaving phase. Added immediately when leave transition is triggered, removed when the transition/animation finishes. This class can be used to define the duration, delay and easing curve for the leaving transition.

-leave-to: Ending state for *-leave class. Added one frame after a leaving transition is triggered (at the same time-leave is removed), removed when the transition/animation finishes.

Example

<template> <div id="app"> <button @click="show = !show;">Show</button>  <transition name="slide"> <h1 v-if="show">Vue transition</h1> </transition> </div> </template> <script> export default { data: function() { return { show: false }; } }; </script> <style> .slide-enter-active,.slide-leave-active { transition: transform 0.4s ease;}.slide-enter,.slide-leave-to { transform: translateY(-50%);}</style>

In the above example, we wrapped our h1 element with transition component having name="slide".

Inside our style tags we added four classes.

.slide-enter:This class is applied one frame before our h1 element is added to the dom.

The .slide-enter-active and .slide-leave-active classes are applying transitions to our h1 element.

Transitions on Initial render

Sometimes we need to apply a transition to our elements when a page is Initially rendered into the dom in such cases we need to add a appear attribute to transition component.

<template> <div id="app">  <transition appear name="slide"> <h1>Vue transitions</h1> </transition> </div> </template> <script> export default {}; </script> <style> .slide-enter-active { transition: transform 0.4s ease; } .slide-enter { transform: translateY(-50%); } </style> 

Transitioning List items

For transitioning list items we need to use <transition-group> component, by default transition-group wraps our list items with span tag.

We can change the default tag by adding the tag attribute to transition-group component.

<template> <div>  <transition-group name="list" tag="ul"> <li v-for="(post, i) in posts" :key="i">{{ post.title }}</li> </transition-group> <button @click="addPosts">add posts</button> </div> </template> <script> export default { data: function() { return { posts: [] }; }, methods: { addPosts: function() { this.posts.push({ title: `${Math.floor(Math.random() * 10 + 1)} post` }); } } }; </script> <style> .list-enter-active, .list-leave-active { transition: all 1s; } .list-enter, .list-leave-to { opacity: 0; transform: translateX(-50%); } </style>