Vue.js Animations and Transitions Tutorial

Elliot Forbes Elliot Forbes ⏰ 3 Minutes 📅 Mar 1, 2018

In this tutorial, we are going to explore how we can use animations and transitions to make our VueJS web application really stand out from the crowd.

A Simple Transition

Let’s start of by creating a few very simple transitions, these will simply fade in when a certain condition is met. I was watching Mission Impossible whilst writing this so the theme for this is a top secret mission. The finished product for this section is going to look something like this:

finished product

So, if we break this down this shouldn’t look as intimidating. We have 3 buttons within a div that when clicked basically flip a boolean value. When this is flipped, it triggers a transition in the black background div below.

<button class="btn btn-primary" v-if="!show" v-on:click="show = !show">
  Show Mission
</button>
<button
  class="btn btn-primary"
  v-if="show && !accepted && !declined"
  v-on:click="accepted = true"
>
  Accept Mission
</button>
<button
  class="btn btn-warning"
  v-if="show && !declined && !accepted"
  v-on:click="declined = true"
>
  Decline Mission
</button>

These all have a v-if directive attached to them to dictate when they are to show. Below these buttons we have 3 distinct <transition/> wrapper components. These <transition/> components allow you to enter/leave transitions when you are doing things like v-if, v-show, using dynamic components or in component root nodes.

<transition name="fade">
  <p v-if="show">Your Mission, should you choose to accept it...</p>
</transition>

<transition name="fade">
  <p v-if="accepted">
    You have accepted the mission, this message will self-destruct in 5...
  </p>
</transition>

<transition name="fade">
  <p v-if="declined">
    You have declined the mission, this message will self-destruct in 5...
  </p>
</transition>

Let’s break down what happens when one of our <p> elements appears/disappears. Vue will automatically listen for whether one of these elements has a CSS transition or animation applied. If it does then these CSS transition classes will be added/removed at the appropriate time.

Full Component Source

This is the full source code for the component with simple transitions:

<template>
  <div class="hello">
    <h1>VueJS <span>Animations</span> and <span>Transitions</span> Tutorial</h1>

    <button class="btn btn-primary" v-if="!show" v-on:click="show = !show">
      Show Mission
    </button>
    <button
      class="btn btn-primary"
      v-if="show && !accepted && !declined"
      v-on:click="accepted = true"
    >
      Accept Mission
    </button>
    <button
      class="btn btn-warning"
      v-if="show && !declined && !accepted"
      v-on:click="declined = true"
    >
      Decline Mission
    </button>

    <div class="cont center-align">
      <transition name="fade">
        <p v-if="show">Your Mission, should you choose to accept it...</p>
      </transition>

      <transition name="fade">
        <p v-if="accepted">
          You have accepted the mission, this message will self-destruct in 5...
        </p>
      </transition>

      <transition name="fade">
        <p v-if="declined">
          You have declined the mission, this message will self-destruct in 5...
        </p>
      </transition>
    </div>
  </div>
</template>

<script>
  export default {
    name: "HelloWorld",
    data() {
      return {
        show: false,
        accepted: false,
        declined: false
      };
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }

  .btn-primary {
    background-color: #256bfc;
  }
  .btn-warning {
    background-color: #c81117;
  }
  .cont {
    background-color: #000;
    width: 100%;
    height: 400px;
    margin-top: 40px;
    padding: 40px;
  }

  div {
    color: white;
  }
  h1 {
    font-weight: normal;
    color: white;
    font-weight: 100;
    font-size: 58px;
  }
  h1 span {
    font-weight: 900;
  }
</style>

Conclusion

That wraps up this tutorial! I hope you found it enlightening and educational! If you enjoyed it then please let me know in the comments section below!

Further Reading

If you enjoyed this article then you may enjoy some of the other tutorials on our site: