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:

  • Getting started with Vue.js Getting started with Vue.jsIn the previous chapter, we have seen several ways to use and install Vue.js in your project. In this article, we sha… Read More
  • Vue.js Conditions & LoopsVue.js Conditions & LoopsConditions and Loops are used in all programming languages to provide repetitive control structures. They can repeat one … Read More
  • Vue.js Declarative RenderingVue.js Declarative RenderingIn Vue.js, there is a system in the core that enables us to declaratively render data to the DOM using simple, straightfor… Read More
  • Vue.js InstanceVue.js InstanceTo start a Vue application, you have to create a new Vue instance by using the Vue function. Whenever we create a new Vue project, the … Read More
  • Vue.js TemplateVue.js TemplateIn the previous Vue.js Instance chapter, we have learned how to get an output in the form of text content on the screen. In this chapte… 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 ...
  • Send message via CANBus
    After some years developing for mobile devices, I've started developing for embedded devices, and I'm finding a new problem now. Th...

Categories

Social Media Links

Blog Archive