vuejs animations

Learn How To Use Vuejs Animations And Transitions

Animations and transition the final layer, that brings your website or web-app to life and entices users to explore. Animations and transitions are an integral part of UX & UI design.

In this tutorial we will discover how animations and transitions work in vuejs.

Transitions:

VueJS provides use with a built-in transition component that needs to be wrapped around the element, which needs transition.

Vuejs supports many types of transitions including entering, leaving, list transitions and also transitions for state.

Use cases of the transition component:

  • Conditional rendering (using v-if)
  • Conditional display (using v-show)
  • Dynamic components
  • Component root nodes

As shown above there is button called clickme created using which we can change the value of the variable show to true to false and vice versa. There is a p tag which shows the text element only if the variable is true. We have wrapped the p tag with the transition element as shown in the following piece of code.

The name of the transition is fade. VueJS provides some standard classes for transition and the classes are prefixed with the name of the transition.

Here are some of the built in transition classes:

  1. v-enter: Starting state for enter. Added before element is inserted, removed one frame after element is inserted.

  2. v-enter-active: Active state for enter. Applied during the entire entering phase. Added before element is inserted, removed when transition/animation finishes. This class can be used to define the duration, delay and easing curve for the entering transition.

  3. v-enter-to: Only available in vue versions 2.1.8+. Ending state for enter. Added one frame after element is inserted (at the same time v-enter is removed), removed when transition/animation finishes.

  4. v-leave: Starting state for leave. Added immediately when a leaving transition is triggered, removed after one frame.

  5. v-leave-active: Active state for leave. Applied during the entire leaving phase. Added immediately when leave transition is triggered, removed when the transition/animation finishes. This class can be used to define the duration, delay and easing curve for the leaving transition.

  6. v-leave-to: Only available in versions 2.1.8+. Ending state for leave. Added one frame after a leaving transition is triggered (at the same time v-leave is removed), removed when the transition/animation finishes.

Each of the above classes will be prefixed with the name of the transition. We have given the name of the transition as fade, hence the name of the classes becomes .fade_enter, .fade_enter_active, .fade_leave, .fade_leave_active.

 

Here are another example using v-if:

vuejs transitions

Animations

Animations are applied the same way as transition is done. Animation also has classes that needs to be declared for the effect to take place.

Let us consider an example to see how animation works.

To apply animation, there are classes same as transition. In the above code, we have an image enclosed in p tag as shown in the following piece of code.

The name of the transition is shiftx. The class applied is as follows:

The class is prefixed with the transition name, i.e. shiftx-enter-active and .shiftx-leave-active. The animation is defined with the keyframes from 0% to 100%. There is a transform defined at each of the keyframes is as shown in the following piece of code.

Custom Transition Classes

VueJS provides a list of custom classes, which can be added as attributes to the transition element.

  • enter-class
  • enter-active-class
  • leave-class
  • leave-active-class

Custom classes basically come into play when we want to use an external CSS library such as animate.css.

Using Vue plugin for adding Anime bindings to Vue components

vuejs animation plugin

Vue-Anime

Install

Usage

Adds a simple directive named v-anime that passes all arguments directly to anime.js

Also adds this.$anime to your components

GitHub

http://github.com/BenAHammond/vue-anime

Share this: