Vue Animation Tutorial - Learn how to use Vue's Animation System

Note: This tutorial is a part of our free course: Vue Tutorial in 2018 - Learn Vue.js by Example

Vue 2 offers the ability to integrate enter & leave animations, along with state transitions. We're going to look at Vue animations in a basic context throughout this lesson, and integrate our own animations with the project that we've been working on throughout this course.

Let's get started!

Using Vue 2 to Create Beautiful SEO-Ready Websites

Vue Tutorial in 2018 - Learn Vue.js by Example

If you prefer watching a video..

Be sure to Subscribe to the Official Coursetro Youtube Channel for more videos.

Enter and Leave Animations in Vue

Perhaps the biggest use case for Vue animations are based on when given elements enter and leave the DOM. These animations, if done correctly, add a nice touch to the UI instead of simply showing the element in an instant.

To demonstrate enter and leave animations, open up /src/components/Skills.vue and modify the template to the following:

    <!-- Other HTML Removed for Brevity -->

    <form @submit.prevent="addSkill">
      <input type="text" placeholder="Enter a skill you have.." v-model="skill" v-validate="'min:5'" name="skill" >

      <!-- Add these 3 lines -->
      <transition name="alert-in">
        <p class="alert" v-if="errors.has('skill')">{{ errors.first('skill') }}</p>
      </transition>


    </form>

    <!-- Other HTML Removed for Brevity -->

The important part to note here is the transition wrapper component. We give it a unique name, such as alert-in, which will serve as a name prefix for our CSS animation class, very shortly.

The transition wrapper will apply animations in the following cases based on what's being wrapped within:

v-if conditional rendering
v-show conditional display
dynamic components
component root nodes

In our case, the <p class="alert" ... element has a v-if directive applied to it already.

In order to make this error message animate, we have to create a CSS class for it in the styles section of the component:

.alert-in-enter-active {
  animation: bounce-in .5s;
}
.alert-in-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

Note: Notice how we're using the name .alert-in as the beginning of the class name? This must match the <transition name="... value.

2nd Note: Here, we're using keyframe animations, which provide more control over your animations, but for simpler animations, you could use CSS transitions instead.

If you view the result in the browser and begin to type a couple characters in our text input, you will notice that the error message animates in based on our keyframe animations. When you remove any type, it will reverse the animations.

The transition classes that you have at your disposal are:

v-enter
v-enter-active
v-enter-to
v-leave
v-leave-active
v-leave-to

Using an Animation Library with Vue

In the event that you don't want to write your own CSS animations, you can very easily use a third party animation library.

Animate.css is a popular animation library that works great with UI animations.

Modify the template as shown:

      <transition name="alert-in" enter-active-class="animated flipInX" leave-active-class="animated flipOutX">
        <p class="alert" v-if="errors.has('skill')">{{ errors.first('skill') }}</p>
      </transition>

The only thing we changed was the addition of enter-active-class and leave-active-class, which are both bound to the CSS classes that Animate.css uses.

Now, we simply have to import the Animate.css library in the styles section:

<style scoped>
@import "https://cdn.jsdelivr.net/npm/animate.css@3.5.1";

...

Save it. Then, you will see that the animations are now based on the Animate.css classes that were specified.

Simple, huh?

Animating Lists

In our project, we have an unordered list that iterates through an array with the help of the v-for directive. We can animate this list with the help of the transition-group component wrapper. It's very simple!

Modify the template as shown:

<!-- Other HTML removed for brevity -->

      <ul>
        <transition-group name="list" enter-active-class="animated bounceInUp" leave-active-class="animated bounceOutDown">
          <li v-for="(data, index) in skills" :key='index'>{{data.skill}}</li>
        </transition-group>
      </ul>

Note: In order for this to work, your list must have an index as ours does with :key='index'.

If you save it and add a new skill, you will see that the new list item animates in based on the Animate.css class we've applied to it.

Conclusion

We've only touched the surface of the Vue Animation system capabilities -- even still, using what you've learned here today, you will be able to accomplish most of what you need in terms of Vue Animation.

Next Lesson: Vue Routing