31 December, 2020

Using Transitions and Animations Together

                No comments   

Using Transitions and Animations Together

Vue.js requires attaching event listeners to make it known when a transition has ended. It may be transitionend or animationend, depending on the CSS you have applied. If you are using only first or only the second type, Vue.js can automatically detect the correct type. But, in the cases when you have to use both transitions and animations together, you may explicitly declare the type.

In some cases, you may want to have both on the same element, for example, having a CSS animation triggered by Vue.js, along with a CSS transition effect on hover. In these cases, you will have to explicitly declare the type you want Vue.js to care about in a type attribute, with a value of either animation or transition.

Explicit Transition Durations

This is a new feature introduced in the Vue.js version 2.2.0+. This is used to apply transition and animation both on the element using Vue.js. By default, Vue.js has to wait for the transionend and animationend event of detecting if the animation or transition is done. In such cases, when the transition causes delay, we can apply the duration explicitly as follows:

  1. <transition :duration = "1000"></transition>  

The duration property is used with the : symbol on the transition element, as you can see in the above code.

If you want to specify the duration separately for entering and leaving cases, you can specify it as follows:

  1. <transition :duration = "{ enter: 500, leave: 800 }">...</transition>   

JavaScript Hooks

The transition classes can be called as methods using JavaScript. You can define JavaScript hooks in attributes. Let's see an example to understand the concept well:

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.         <script src = "https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>  
  7.     </head>  
  8.     <body>  
  9.     <div id = "trans">  
  10.          <button @click = "show = !show">  
  11.             <span style = "font-size:25px;">Toggle</span>  
  12.          </button>  
  13.          <transition  v-on:before-enter = "beforeEnter"  
  14.             v-on:enter = "enter"  
  15.             v-on:leave = "leave"  
  16.             v-bind:css = "false">  
  17.             <p v-if = "show" style = "font-size:25px;">This is an animation Example with velocity</p>  
  18.          </transition>  
  19.       </div>  
  20.       </script>  
  21.       <script src="index.js"></script>  
  22.    </body>  
  23. </html>  

Index.js file:

  1. var vm = new Vue({  
  2.             el: '#trans',  
  3.             data: {  
  4.                show: false  
  5.             },  
  6.             methods: {  
  7.                beforeEnter: function (el) {  
  8.                   el.style.opacity = 0  
  9.                },  
  10.                enter: function (el, done) {  
  11.                   Velocity(el, { opacity: 1, fontSize: '25px' }, { duration: 1000 })  
  12.                   Velocity(el, { fontSize: '10px' }, { complete: done })  
  13.                },  
  14.                leave: function (el, done) {  
  15.                   Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 1500 })  
  16.                   Velocity(el, { rotateZ: '100deg' }, { loop: 2 })  
  17.                   Velocity(el, {  
  18.                      rotateZ: '45deg',  
  19.                      translateY: '30px',  
  20.                      translateX: '30px',  
  21.                      opacity: 0  
  22.                   }, { complete: done })  
  23.                }  
  24.             }  
  25.          })  

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, an animation is performed using js methods on the transition element. The methods on transition are applied as follows:

  1. <transition  v-on:before-enter = "beforeEnter"  
  2.    v-on:enter = "enter"  
  3.    v-on:leave = "leave"  
  4.    v-bind:css = "false">  
  5.    <p v-if = "show" style = "font-size:25px;">Animation Example with velocity</p>  
  6. </transition>   

A prefix v-on is added before the name of the event. We have also added a property on transition v-bind:css = "false", so that Vue.js understands it as a JavaScript transition.

The methods are defined in the Vue.js instance as follows:

  1. methods: {  
  2.    beforeEnter: function (el) {  
  3.       el.style.opacity = 0  
  4.    },  
  5.    enter: function (el, done) {  
  6.       Velocity(el, { opacity: 1, fontSize: '25px' }, { duration: 1000 })  
  7.       Velocity(el, { fontSize: '10px' }, { complete: done })  
  8.    },  
  9.    leave: function (el, done) {  
  10.       Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 1500 })  
  11.       Velocity(el, { rotateZ: '100deg' }, { loop: 2 })  
  12.       Velocity(el, {  
  13.          rotateZ: '45deg',  
  14.          translateY: '30px',  
  15.          translateX: '30px',  
  16.          opacity: 0  
  17.       }, { complete: done })  
  18.    }  
  19. }  

We have applied the required transition in each of the above methods. An opacity animation is applied on the click of the button and when the animation is done. A third party library is also used for animation.

Transition on Initial Render

If you want to add animation at the start, you have to add 'appear' property to the transition element. See the following example to understand it better:

Index.html file:

  1. <html>  
  2.    <head>  
  3.       <title>Vue.js Animation</title>  
  4.       <link rel="stylesheet" href="index.css">  
  5.       <link href = "https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel = "stylesheet" type = "text/css">  
  6.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  7.         <script src = "https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>  
  8.     </head>  
  9.     <body>  
  10.         <div id = "trans_2" style = "text-align:center">  
  11.          <transition  
  12.             appear  
  13.             appear-class = "custom-appear-class"  
  14.             appear-active-class = "animated bounceIn">  
  15.             <h3>This is BounceIn Animation Example</h3>  
  16.          </transition>  
  17.          <transition  
  18.             appear  
  19.             appear-class = "custom-appear-class"  
  20.             appear-active-class = "animated swing">  
  21.             <h3>This is Swing Animation Example</h3>  
  22.          </transition>  
  23.          <transition  
  24.             appear  
  25.             appear-class = "custom-appear-class"  
  26.             appear-active-class = "animated rubberBand">  
  27.             <h3>This is RubberBand Animation Example</h3>  
  28.          </transition>  
  29.       </div>  
  30.       </script>  
  31.       <script src="index.js"></script>  
  32.    </body>  
  33. </html>  

Index.js file:

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

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


Sources by : coderfunda.tk

Related Posts:

0 comments:

Post a Comment

Thanks

Meta

Popular Posts

Categories

Social Media Links

Blog Archive