31 December, 2020

Vue.js Transition and Animation

                No comments   

 

Vue.js Transition and Animation

Vue.js provides several ways to apply transition and animation effects to the applications when you insert, update, or remove items from the DOM. These transition and animation effects are used to make the application attractive and interactive for the users.

It also provides some tools to do the following tasks:

  • It provides classes and automatically applies those classes for CSS transitions and animations.
  • It can integrate 3rd-party CSS animation libraries, for example, Animate.css.
  • It can use JavaScript to manipulate the DOM during transition hooks directly.
  • It can integrate 3rd-party JavaScript animation libraries, for example, Velocity.js.

Vue.js Transition

There are many ways to apply the transition to the HTML elements when you insert, update, or remove items from the DOM. Vue.js provides a built-in transition wrapper component that you have to use while entering/leaving transitions for any element or component. See the syntax of the transition effect.

Syntax:

  1. <transition name = "name_of_the_transition">  
  2.    <div></div>  
  3. </transition>  

Let's see a simple example to understand the concept and working of transition effect.

Vue.js fade transition

Example 1

Index.html file:

  1. <html>  
  2.    <head>  
  3.       <title>Vue.js Transition</title>  
  4.       <link rel="stylesheet" href="index.css">  
  5.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  6.     </head>  
  7.     <body>  
  8.      <style>  
  9.          .fade-enter-active, .fade-leave-active {  
  10.             transition: opacity 3s  
  11.          }  
  12.          .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {  
  13.             opacity: 0  
  14.          }  
  15.       </style>  
  16.       <div id = "databinding">  
  17.           <p> Click at the below button to see transition effect.</p>  
  18.          <button v-on:click = "show = !show">Click Here</button>  
  19.          <transition name = "fade">  
  20.             <p v-show = "show" v-bind:style = "styleobj">This is a Fade Transition Example</p>  
  21.          </transition>  
  22.       </div>  
  23.       </script>  
  24.       <script src="index.js"></script>  
  25.    </body>  
  26. </html>  

Index.js file:

  1. var vm = new Vue({  
  2.             el: '#databinding',  
  3.             data: {  
  4.                show:true,  
  5.                styleobj :{  
  6.                   fontSize:'30px',  
  7.                   color:'red'  
  8.                }  
  9.             },  
  10.             methods : {  
  11.             }  
  12.          })  

Let's use a simple CSS file to make the output more attractive.

Index.css file:

  1. html, body {  
  2.     margin: 5px;  
  3.     padding: 0;  
  4. }  

After the execution of the program, you will see the following output:

Output:

Vue.js Transition and Animation

When you click of the button, the text will fade away within 3 seconds. See the following image:

Vue.js Transition and Animation

Example Explanation

In the above example, we have created a button called "Click Here" which we can change the value of the variable show to true to false and vice versa. We have written v-show directive in p tag, which shows the text element only if the variable is true. The p tag is wrapped with the transition element as following:

  1. <transition name = "fade">  
  2.    <p v-show = "show" v-bind:style = "styleobj">This is a Fade Transition Example</p>  
  3. </transition>   

This is an example of a fade transition. Following is a list of some standard classes used in transition:

v-enter: This transition class is called initially before the element is updated or added to the HTML element. This specifies the starting state.

v-enter-active: This transition class is used to define the delay, duration, and easing curve for entering the transition phase. This class specifies the active state for the entire phase, and this is always available during the entire entering phase.

v-leave: This transition class is added when the leaving transition is triggered or removed.

v-leave-active: This transition class is used during the leaving phase. When the transition is completed, this class is removed automatically. This class specifies the delay, duration, and easing curve during the leaving phase.

Each of the transition classes will be prefixed with the name of the transition. For example, for fade transition,the name of the classes would be .fade_enter, .fade_enter_active, .fade_leave, .fade_leave_active.

In the above example, we have defined the .fade_enter_active and the .fade_leave_active class together, and it applies a transition at the start and the leaving stage.

Here, the opacity property is changed to 0 in 3 seconds.

Vue.js shiftx transition

Let's take another example, where we have used an image to shift on the x-axis when the button is clicked.

Here, we are using the shiftx transition. This transform property will shift the image on the x-axis by 100px. See the following example:

Example 2

Index.html file:

  1. <html>  
  2.    <head>  
  3.       <title>Vue.js Transition</title>  
  4.       <link rel="stylesheet" href="index.css">  
  5.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  6.     </head>  
  7.     <body>  
  8.      <style>  
  9.          .shiftx-enter-active, .shiftx-leave-active {  
  10.             transition: all 2s ease-in-out;  
  11.          }  
  12.          .shiftx-enter, .shiftx-leave-to /* .fade-leave-active below version 2.1.8 */ {  
  13.             transform :  translateX(100px);  
  14.          }  
  15.       </style>  
  16.       <div id = "databinding">  
  17.           <p> Click at the below button to see transition effect.</p>  
  18.          <button v-on:click = "show = !show">Click Here</button>  
  19.          <transition name = "shiftx">  
  20.             <p v-show = "show">  
  21.                <img src = "https://www.flowerpower.com.au/media/catalog/product/image/287189f77f/love-you-rose.jpg" style = "width:100px;height:100px;" />  
  22.             </p>  
  23.          </transition>  
  24.       </div>  
  25.       </script>  
  26.       <script src="index.js"></script>  
  27.    </body>  
  28. </html>  

Index.js file:

  1. var vm = new Vue({  
  2.             el: '#databinding',  
  3.             data: {  
  4.                show:true  
  5.             },  
  6.             methods : {  
  7.             }  
  8.          })  

After the execution of the program, you will see the following output:

Output:

Vue.js Transition and Animation

When you click on the button, the image will be shifted 100px towards the right. See the following output:

Vue.js Transition and Animation

Resources : javatpoint.com

Related Posts:

  • VueJS Render Function We have seen components and the usage of it. For example, we have a content that needs to be reused across the project. We can convert the same … Read More
  • VueJS RoutingVueJS does not have a built-in router feauture. We need to follow some additional steps to install it.Direct Download from CDNThe latest version of vu… Read More
  • VueJS - Reactive InterfaceVueJS provides options to add reactivity to properties, which are added dynamically. Consider that we have already created vue instance and need to ad… Read More
  • VueJS MixinsMixins are basically to be used with components. They share reusable code among components. When a component uses mixin, all options of mixin become a… Read More
  • VueJS Examples Example 1: Currency Converter<html> <head> <title>VueJs Instance</title> <script type = "text/javascript"… Read More

0 comments:

Post a Comment

Thanks

Meta

Popular Posts

  • Write API Integrations in Laravel and PHP Projects with Saloon
    Write API Integrations in Laravel and PHP Projects with Saloon Saloon  is a Laravel/PHP package that allows you to write your API integratio...
  • Features CodeIgniter
    Features CodeIgniter There is a great demand for the CodeIgniter framework in PHP developers because of its features and multiple advan...
  • Laravel Breeze with PrimeVue v4
    This is an follow up to my previous post about a "starter kit" I created with Laravel and PrimeVue components. The project has b...
  • Fast Excel Package for Laravel
      Fast Excel is a Laravel package for importing and exporting spreadsheets. It provides an elegant wrapper around Spout —a PHP package to ...
  • Credit card validation in laravel
      Validation rules for credit card using laravel-validation-rules/credit-card package in laravel Install package laravel-validation-rules/cr...

Categories

Social Media Links

Blog Archive