Vue.js Transitions

Transitions in Vue allow you to apply effects to elements when they are inserted, updated or removed from the DOM. For example, the classic fade:

The transition system has been a feature of Vue since the first version, but in version 2 there have been some changes, mainly that it is now completely component-based (which I think is much better…more on this later).

What transitions do

Transitions can be tricky to understand. Here’s what you need to know to get started:

  • The transition system can work with CSS (e.g. visual effects like fading) but can also be used with JS (e.g. transitioning data between different values).
  • CSS transitions work in conjunction with the CSS3 transition and animation features. The CSS does the actual transitioning, but Vue handles stuff like when to add/remove appropriate classes etc.

Example

Let’s say we want to fade an element in or out when it is added/removed from the DOM, just like in the GIF at the start of this story.

Thinking just about CSS for now, to get a fade effect we might do something like this:

.in {
  opacity: 1;
  transition: opacity .5s ease-in-out;
}
.out {
  opacity: 0;
}

When we want to see the element, we use thein class, when we don’t, we use the out class. We use the CSS3 transition rule to provide the fade effect.

So where would Vue come in to this? It can handle the adding and removing of the in and out classes!

Working example

Let’s make the above example into something that will actually work. We’re going to have a button that will show/hide the element:

<div id="app">
  <button v-on:click="show = !show">Toggle</button>  
  <p v-if="show">Now you see me</p>
</div>

There are two steps to get this element to fade:

Step 1 — Wrap the element with a transition component

<transition name="fade">
  <p v-if="show">Now you see me</p>
</transition>

The transition component tells Vue to apply a transition to the element within. Since it is an abstract component it will not be rendered in the DOM. Note that we’ve given it the name “fade” but you can name it whatever you want.

Step 2 — Create the CSS classes needed for your transition effect.

Vue will add CSS classes to the element at the appropriate times to allow you to create your transition effect:

  • v-enter before the element is inserted, removed after one frame.
  • v-enter-active before element is inserted, removed when transition/animation finishes.
  • v-leave when leave transition is triggered, removed after one frame.
  • v-leave-active when leave transition is triggered, removed when transition/animation finishes.

Since we named our transition “fade”, Vue will change the class names to fade-enter, fade-leave etc instead of the generic v- prefix. (Note that you can customise your transition classes to whatever you want if you need to make your transition compatible with a 3rd party CSS library, check the Vue docs to learn how).

Here’s how we’d implement our CSS given the Vue classes:

.fade-enter-active, .fade-leave-active {
  opacity: 1;
  transition: opacity .5s ease-in-out;
}
.fade-enter, .fade-leave-active {
  opacity: 0
}

And that’s it! Now the full code:

<style>
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s
  }
  .fade-enter, .fade-leave-active {
    opacity: 0
  }
</style>

<div id="app">
  <button v-on:click="show = !show">Toggle</button>
  <transition name="fade">
    <p v-if="show">Now you see me</p>
  </transition>
</div>

<script type="text/javascript">
  new Vue({
    el: '#app',
    data: {
      show: true
    }
  });
</script>
Anthony Gore's Picture

About Anthony Gore

Anthony is a web developer and online course instructor with a passion for Javascript. He currently resides in Chiang Mai, Thailand.

Comments