fbpx

VueJS Animations for Beginners

Animations are a great way to make your website feel more modern and to give site visitors a better user experience. Luckily for developers, VueJS animations take just minutes to set up. 

By the end of this tutorial, you’ll have your first VueJS animation and know the essentials to adding them into your projects. Here are the two examples we’ll be creating.

First, we’ll create our own CSS animation styles.

Then, we’ll see how to use a third party CSS library with Vue animations.

Using Animate.css

Okay! Let’s jump right in. 

Transition Element

Animations are handled very similarly to VueJS transitions. They both use Vue’s <transition> element. 

The <transition> element is a wrapper component that provides enter/exit transition classes and hooks for elements like 

  • Conditional Rendered or Displayed elements (v-show or v-if)
  • Dynamic components (:is)
  • Component Root Nodes (can wrap entire components)

The element able to detect when one of these elements changes state – whether its visibility changes, content changes, or if it’s added to the DOM. Then, it adds certain transition classes that we can use to style the transition. 

By default, there are six classes that are available. 

  • v-enter / v-leave: the start state of the transition; removed once transition starts 
  • v-enter-active / v-leave-active: the active state of the transition
  • v-enter-to / v-leave-to: the end state of the transition

These six are the default names for a nameless transition. If we give our transition a name attribute the classes become name-enter, name-enter-active, and so on.

Alternatively, there are also JS hooks emitted by the transition element, so we can capture them and perform our animations in Javascript instead of CSS. The available hooks are:

  • before-enter / before-leave
  • enter / leave
  • after-enter / after-leave
  • enter-cancelled / leave-cancelled

Great! Now that we know all about the <transition> element, let’s use it to make an animation.

Building our first animation

For starters, we’ll need a conditional element surrounded by a transition element. Our starter single file component would look a little like this. 

<template>
  <div class='main-content'>
    <transition name='rotate'>
      <img 
        v-if='show' 
        src='../img/logo.png'
      > 
    </transition>
  </div>
</template>

<script>
export default {
  data () {
    return {
      show: true
    }
  }
}
</script>

Next, let’s add a button that toggles the display of our element by switching the value of the variable. 

<button @click='show = !show'> Toggle </button>

With the element’s conditional rendering set up, let’s actually style our animation using the two classes: rotate-enter-active and rotate-leave-active because we named our transition rotate.

A cool trick is to make the leave animation use the same as the enter animation, but just to throw it in reverse!

@keyframes rotate {
    0% { opacity: 0; transform: scale(0) rotate(-180deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.rotate-enter-active {
    animation: rotate 0.2s;
}

.rotate-leave-active {
    animation: rotate 0.2s reverse;
}

Now, when we view our component and toggle our component, we should see something like this. 

There you have it! You’re using VueJS animations!

Using third-party libraries

But let’s say we don’t want to write all of our own CSS animations. There are so many great CSS animation libraries out there and it’s easy to incorporate them into a VueJS animation. 

In our first example, we just used the default class names generated by our <transition> element, but one thing we can do is override these values to any class we want, in this case, it would be the class names from a CSS library. 

For our example, we’ll be using Animate.css – to add this, we can just add the CDN link to our index.html file. 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">

Now, in our <transition> element, we can use the attributes enter-active-class and leave-active-class to connect our transition to Animate.js. Note that for Animate.js, we need to add the class animated.

<transition 
  enter-active-class="animated fadeIn zoomIn" 
  leave-active-class="animated fadeOut zoomOut"
>
...
</transition>

Super straightforward. Here’s our result.

There you have it!

Just like that, you were able to start adding VueJS animations into your project. 

It’s important to not overdo things. Adding too many big animations is a fast way to make your site seem tacky, but adding subtle visual feedback using animations is a great way to make your site more user-friendly. Just be smart!

Hopefully this tutorial helped you get more comfortable with Vue animations and transitions. 

Happy coding!