31 December, 2020

Vue.js Animation

                No comments   

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"   

Related Posts:

  • Vue.js Mixins  Vue.js MixinsIn Vue.js, mixins are a set of defined logic, stored in a predefined way specified by Vue.js. We can use these mixins over a… Read More
  • Vue.js Tutorial Vue.js TutorialVue.js Tutorial Vue.js Tutorial open link Vue.js Installation Vue.js Getting started Declarative Rendering&nb… Read More
  • Vue.js Render functions  Vue.js Render functionsVue.js recommends us to use templates to build HTML. Here, we can use the render function as a closer-to-the-compi… Read More
  • Vue.js Routing  Vue.js RoutingVue.js does not have a built-in router feature, but you can easily create a single page application that supports routing u… Read More
  • Vue.js Reactivity System  Vue.js Reactivity SystemThe reactivity system is one of the most distinctive features of Vue.js. In Vue.js, models are plain JavaScript o… Read More

0 comments:

Post a Comment

Thanks

Meta

Popular Posts

Categories

Social Media Links

Blog Archive