VueJs Animations

Single-Page Applications (SPAs) give a far superior user experience vs a “traditional” web app. However, when navigating between pages and manipulating DOM elements can, it can create a jarring experience. And, believe it or not, this can affect how a user perceives the performance of an application.

To mitigate this, we’re going to look at how to animate your web application to give it a more polished look. In particular, we’re going to look at how you can easily incorporate animations using VueJs and Animate.css.

Adding Animate.css to Vue

To add the animate.css to your Vue application, open up a terminal in the root of your project, and run the following command:

npm install animate.css

Then in src/main.js import the package:

import 'animate.css';

Animating the Vue Router

VueJs Router Animation

To animate on Vue router navigation, head over to src/App.vue. Inside of App.vue, you’ll see a tag element called . To show an animation when navigating between pages, all you have to do is wrap the router-view tag in a <_transition> _tag (docs). Then add an _enter-active-class, leave-active-class, _and mode.

<transition
 mode="out-in"
 enter-active-class="animate__animated animate__fadeIn"
 leave-active-class="animate__animated animate__fadeOut"
>
  <router-view />
</transition>

• **enter-active class **— This is the CSS class used when the new view enters. In this example, we’re using the fade-in class provided by Animate.css.
• **leave-active class **— This is the CSS class used when the old view leaves. In this example, we’re using the fade-out class provided by Animate.css.
• **mode **— Controls the timing sequence of leaving/entering transitions. Available modes are “out-in” and “in-out”; Defaults to simultaneous (docs).

#software-development #programming #css #vuejs #javascript #vue