Pages

▼

31 December, 2020

Vue.js Animation

Vue.js Animation

In Vue.js applications, we can apply animations in the same way as we applied transition in earlier examples. Animation also has classes that you have to declare to get the animation effect.

The only difference between Vue.js transition and Vue.js animation is that in Vue.js animation, the v-enter is not removed immediately after the element is inserted, but on an animation end event.

Let's take an example to understand the concept of animation and see how the animation works in an application.

Example

Index.html file:

  1. <html>  
  2.    <head>  
  3.       <title>Vue.js Animation</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 {  
  10.             animation: shift-in 2s;  
  11.          }  
  12.          .shiftx-leave-active {  
  13.             animation: shift-in 2s reverse;  
  14.          }  
  15.          @keyframes shift-in {  
  16.             0%   {transform:rotateX(0deg);}  
  17.             25%  {transform:rotateX(90deg);}  
  18.             50%  {transform:rotateX(120deg);}  
  19.             75%  {transform:rotateX(180deg);}  
  20.             100% {transform:rotateX(360deg);}  
  21.          }  
  22.       </style>  
  23.       <div id = "databinding">  
  24.       <p> Click at the below button to see the animation effect.</p>  
  25.          <button v-on:click = "show = !show">Click Here</button>  
  26.          <transition name = "shiftx">  
  27.             <p v-show = "show">  
  28.                <img src = "https://www.flowerpower.com.au/media/catalog/product/image/287189f77f/love-you-rose.jpg" style = "width:100px;height:100px;" />  
  29.             </p>  
  30.          </transition>  
  31.       </div>  
  32.       </script>  
  33.       <script src="index.js"></script>  
  34.    </body>  
  35. </html>  

Index.js file:

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

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


Example Explanation

In the above example, you can see that we have used classes same as transition effect. Here, we have enclosed an image in p tag as following:

  1. <transition name = "shiftx">  
  2.             <p v-show = "show">  
  3.                <img src = "https://www.flowerpower.com.au/media/catalog/product/image/287189f77f/love-you-rose.jpg" style = "width:100px;height:100px;" />  
  4.             </p>  
  5.          </transition>  

Here, the name of the transition is shiftx and the class is applied as the following CSS code:

  1. <style>  
  2.    .shiftx-enter-active {  
  3.       animation: shift-in 2s;  
  4.    }  
  5.    .shiftx-leave-active {  
  6.       animation: shift-in 2s reverse;  
  7.    }  
  8.    @keyframes shift-in {  
  9.       0%   {transform:rotateX(0deg);}  
  10.       25%  {transform:rotateX(90deg);}  
  11.       50%  {transform:rotateX(120deg);}  
  12.       75%  {transform:rotateX(180deg);}  
  13.       100% {transform:rotateX(360deg);}  
  14.    }  
  15. </style>   

In the above code, the class is defined within the transition name, i.e. shiftx-enter-active and .shiftx-leave-active.

The animation is defined with the keyframes from 0% to 100% where transform is defined at each of the keyframes in degree as following:

  1. @keyframes shift-in {  
  2.    0%   {transform:rotateX(0deg);}  
  3.    25%  {transform:rotateX(90deg);}  
  4.    50%  {transform:rotateX(120deg);}  
  5.    75%  {transform:rotateX(180deg);}  
  6.    100% {transform:rotateX(360deg);}  
  7. }  

Custom Transition Classes

Vue.js facilitates you to specify your own custom transition classes by providing the following attributes. These attributes can be added to the transition element.

  • enter-class
  • enter-active-class
  • enter-to-class (added in version 2.1.8+)
  • leave-class
  • leave-active-class
  • leave-to-class (added in version 2.1.8+)

Custom classes are generally used when we want to use an external CSS library such as animate.css.

Let's take an example to understand the concept of custom transition classes and see how they work in an application.

Example

Index.html file:

  1. <html>  
  2.    <head>  
  3.       <title>Vue.js Animation</title>  
  4.       <link href = "https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel = "stylesheet" type = "text/css">  
  5.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  6.       <script type = "text/javascript" src = "js/vue.js"></script>  
  7.     </head>  
  8.     <body>  
  9.      <div id = "animation" style = "text-align:center">  
  10.          <button @click = "show = !show"><span style = "font-size:25px;">Click Here</span></button>  
  11.          <transition  
  12.             name = "custom-classes-transition"  
  13.             enter-active-class = "animated swing"  
  14.             leave-active-class = "animated bounceIn">  
  15.             <p v-if = "show"><span style = "font-size:25px;">See the animation effect</span></p>  
  16.          </transition>  
  17.       </div>  
  18.       </script>  
  19.       <script src="index.js"></script>  
  20.    </body>  
  21. </html>  

Index.js file:

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

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


When you click on the "Click Here" button, you can see two types of animations. The first animation is applied to the above example is:

  1. enter-active-class = "animated swing"   
at

No comments:

Post a Comment

Thanks