Hello folks! Welcome back to a new section of our tutorial on Vue.js. In this tutorial post, we will be studying about Vue.js Transition and Animation.
Transition
Vue.js gives many ways to apply transition to the HTML elements when they are added or updated in the DOM. Vue.js has a built-in transition component that must be wrapped around the element, which needs transition.
Syntax
<transition name = "nameoftransition"> <div></div> </transition>
Let us look at an example to understand the working of transition.
Example
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <style> .fade-enter-active, .fade-leave-active { transition: opacity 2s } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0 } </style> <div id = "databinding"> <button v-on:click = "show = !show">Click Me</button> <transition name = "fade"> <p v-show = "show" v-bind:style = "styleobj">Animation Example</p> </transition> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#databinding', data: { show:true, styleobj :{ fontSize:'30px', color:'red' } }, methods : { } }); </script> </body> </html>
There's a button known as clickme created using v-on:click = "show = !show" which we can change the value of the variable show to true or false and vice versa. There is a p tag which displays the text element only if the variable is true. We have wrapped the p tag with the transition element as shown in the following piece of code.
<transition name = "fade"> <p v-show = "show" v-bind:style = "styleobj">Animation Example</p> </transition>
The name of the transition is fade. Vue.js makes available some standard classes for transition and the classes are prefixed with the name of the transition.
Following are some of the standard classes for transition -
Following are some of the standard classes for transition -
- v-enter - v-enter is called first before the element is updated/added. It's the starting state.
- v-enter-active - v-enter-active defines the delay, duration, and easing curves for entering in the transition phase. It is the active state for all the class and the class is available during the entire entering phase.
- v-leave - It is added when the leaving transition is triggered, removed.
- v-leave-active - This class is applied during the leaving phase. It's removed when the transition is done. This class applies the delay, duration, and easing curve during the leaving phase.
Each of the above listed classes is going to be prefixed with the transition name. We've named the transition as fade, Therefore the names of the classes becomes .fade_enter, .fade_enter_active, .fade_leave, and finally .fade_leave_active.
They are defined in the following code.
They are defined in the following code.
<style> .fade-enter-active, .fade-leave-active { transition: opacity 2s } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0 } </style>
.fade_enter_active and .fade_leave_active are defined simultaneously and it applies a transition at the beginning and at the leaving stages. The opacity property is changed to 0 in 2 seconds.
In .fade_enter_active and .fade_leave_active, the duration is defined. The ending stage is defined in the .fade_enter, .fade_leave_to.
The display in the browser is as follows -
In .fade_enter_active and .fade_leave_active, the duration is defined. The ending stage is defined in the .fade_enter, .fade_leave_to.
The display in the browser is as follows -
On the click of the button, the text will fade away in two seconds.
After two seconds, the text will completely disappear.
READ: Vue.js | Rendering
Let us look at another example, where there is an image and the image is shifted on the x-axis when the button is clicked.
Example
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <style> .shiftx-enter-active, .shiftx-leave-active { transition: all 2s ease-in-out; } .shiftx-enter, .shiftx-leave-to /* .fade-leave-active below version 2.1.8 */ { transform : translateX(100px); } </style> <div id = "databinding"> <button v-on:click = "show = !show">Click Me</button> <transition name = "shiftx"> <p v-show = "show"> <img src = "images/img.jpg" style = "width:100px;height:100px;" /> </p> </transition> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#databinding', data: { show:true }, methods : { } }); </script> </body> </html>
The transition name is shiftx. A transform property is used to shift the image on the x-axis by 100px making use of the following piece of code.
<style> .shiftx-enter-active, .shiftx-leave-active { transition: all 2s ease-in-out; } .shiftx-enter, .shiftx-leave-to /* .fade-leave-active below version 2.1.8 */ { transform : translateX(100px); } </style>
Following is the output -
Soon as the button is clicked, the image will shift 100px toward the right as shown in the following screenshot -
Animation
Animations are applied the same manner as transition. Animation also has classes that needs to be declared for the effect to occur.
Example
Let's consider a simple example to see how animation works.
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <style> .shiftx-enter-active { animation: shift-in 2s; } .shiftx-leave-active { animation: shift-in 2s reverse; } @keyframes shift-in { 0% {transform:rotateX(0deg);} 25% {transform:rotateX(90deg);} 50% {transform:rotateX(120deg);} 75% {transform:rotateX(180deg);} 100% {transform:rotateX(360deg);} } </style> <div id = "databinding"> <button v-on:click = "show = !show">Click Me</button> <transition name = "shiftx"> <p v-show = "show"> <img src = "images/img.jpg" style = "width:100px;height:100px;" /> </p> </transition> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#databinding', data: { show:true }, methods : { } }); </script> </body> </html>
To apply animation, there are classes same as transition. In the above code, we have an image that is enclosed in p tag as shown in the following piece of code.
<transition name = "shiftx"> <p v-show = "show"><img src = "images/img.jpg" style = "width:100px;height:100px;" /></p> </transition>
The transition name is shiftx. The class that is applied is as follows -
<style> .shiftx-enter-active { animation: shift-in 2s; } .shiftx-leave-active { animation: shift-in 2s reverse; } @keyframes shift-in { 0% {transform:rotateX(0deg);} 25% {transform:rotateX(90deg);} 50% {transform:rotateX(120deg);} 75% {transform:rotateX(180deg);} 100% {transform:rotateX(360deg);} } </style>
The class is prefixed with the name of the transition, i.e. shiftx-enter-active and .shiftx-leave-active. The animation is defined with the keyframes from 0% to 100%. There is a transform defined at each of the keyframes as shown in the following piece of code.
@keyframes shift-in { 0% {transform:rotateX(0deg);} 25% {transform:rotateX(90deg);} 50% {transform:rotateX(120deg);} 75% {transform:rotateX(180deg);} 100% {transform:rotateX(360deg);} }
Following is the output -
On the click of the button, it rotates from 0 to 360 degree and disappear.
READ: Vue.js | Events
Custom Transition Classes
Vue.js gives a list of custom classes, which can be added as attributes to the transition element.
- enter-class
- enter-active-class
- leave-class
- leave-active-class
Custom classes essentially comes into play when we want to use an external CSS library such as animate.css.
Example
<html> <head> <link href = "https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel = "stylesheet" type = "text/css"> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "animate" style = "text-align:center"> <button @click = "show = !show"><span style = "font-size:25px;">Animate</span></button> <transition name = "custom-classes-transition" enter-active-class = "animated swing" leave-active-class = "animated bounceIn"> <p v-if = "show"><span style = "font-size:25px;">Example</span></p> </transition> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#animate', data: { show: true } }); </script> </body> </html>
Output
There're two animations applied in the code above. One of the animation is enter-active-class = "animated swing" and another leave-active-class = "animated bounceIn". We are utilizing customs animation classes for the animation to be applied from the third party library.
Explicit Transition Duration
We can apply transitions and animations on the element utilizing Vue.js. Vue wait for the transitionend and the animationend event to detect if the animation or transition is done.
Sometimes the transition can cause delay. In such conditions, we can explicitly apply the duration as follows -
Sometimes the transition can cause delay. In such conditions, we can explicitly apply the duration as follows -
<transition :duration = "1000"></transition> <transition :duration = "{ enter: 500, leave: 800 }">...</transition>
We can use the duration property with a : on the transition element as shown in the code snippet above. In the case there is a need to specify the duration separately for entering and leaving, it can be done as shown in the above piece of code.
JavaScript Hooks
Transition classes can be called as methods using JavaScript events.
Example
Let us consider a short example for better understanding.
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <script src = "https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script> <div id = "example-4"> <button @click = "show = !show"> <span style = "font-size:25px;">Toggle</span> </button> <transition v-on:before-enter = "beforeEnter" v-on:enter = "enter" v-on:leave = "leave" v-bind:css = "false"> <p v-if = "show" style = "font-size:25px;">Animation Example with velocity</p> </transition> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#example-4', data: { show: false }, methods: { beforeEnter: function (el) { el.style.opacity = 0 }, enter: function (el, done) { Velocity(el, { opacity: 1, fontSize: '25px' }, { duration: 1000 }) Velocity(el, { fontSize: '10px' }, { complete: done }) }, leave: function (el, done) { Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 1500 }) Velocity(el, { rotateZ: '100deg' }, { loop: 2 }) Velocity(el, { rotateZ: '45deg', translateY: '30px', translateX: '30px', opacity: 0 }, { complete: done }) } } }); </script> </body> </html>
Output
In the above illustration, we are performing animation making use of js methods on the transition element.
The methods on the transition are applied as follows -
The methods on the transition are applied as follows -
<transition v-on:before-enter = "beforeEnter" v-on:enter = "enter" v-on:leave = "leave" v-bind:css = "false"> <p v-if = "show" style = "font-size:25px;">Animation Example with velocity</p> </transition>
There's a prefix added v-on and the name of the event to which the method is called. The methods are defined in the Vue instance as follows -
methods: { beforeEnter: function (el) { el.style.opacity = 0 }, enter: function (el, done) { Velocity(el, { opacity: 1, fontSize: '25px' }, { duration: 1000 }) Velocity(el, { fontSize: '10px' }, { complete: done }) }, leave: function (el, done) { Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 1500 }) Velocity(el, { rotateZ: '100deg' }, { loop: 2 }) Velocity(el, { rotateZ: '45deg', translateY: '30px', translateX: '30px', opacity: 0 }, { complete: done }) } }
The required transition is applied in each of these methods above. There is an opacity animation applied on the click of the button and as well when the animation is executed. Third party library is used for animation.
There is a property included on transition v-bind:css = "false", which is done so that Vue understands it is a JavaScript transition.
There is a property included on transition v-bind:css = "false", which is done so that Vue understands it is a JavaScript transition.
READ: Vue.js | Components
Transition at the initial Render
In order to include animation at the start, we need to add 'appear' property to the element of the transition.
Example
Let us look at an example to understand it better.
<html> <head> <link href = "https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel = "stylesheet" type = "text/css"> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "animate" style = "text-align:center"> <transition appear appear-class = "custom-appear-class" appear-active-class = "animated bounceIn"> <h1>BounceIn - Animation Example</h1> </transition> <transition appear appear-class = "custom-appear-class" appear-active-class = "animated swing"> <h1>Swing - Animation Example</h1> </transition> <transition appear appear-class = "custom-appear-class" appear-active-class = "animated rubberBand"> <h1>RubberBand - Animation Example</h1> </transition> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#animate', data: { show: true } }); </script> </body> </html>
In the above example, we have made use of three different animations from animate.css library. We've added appear to the transition element.
On execution of the above code, following is going to be the output in the browser.
On execution of the above code, following is going to be the output in the browser.
Animation on Components
The transition for the components can be wrapped using the following code. We have used dynamic component here.
Example
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> <link href = "https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel = "stylesheet" type = "text/css"> </head> <body> <div id = "databinding" style = "text-align:center;"> <transition appear appear-class = "custom-appear-class" appear-active-class = "animated wobble"> <component v-bind:is = "view"></component> </transition> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#databinding', data: { view: 'component1' }, components: { 'component1': { template: '<div><span style = "font- size:25;color:red;">Animation on Components</span></div>' } } }); </script> </body> </html>
Output
READ: Vue.js | Template
Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we will be discussing about Vue.js Directives.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.