fbpx

How You Can Use Vue Transitions Right Now

Adding transitions to your Vue app is a simple way to make your project feel more professional. By improving your user experience, you can keep more people on your site and boost your conversion rate. 

It just takes a little bit of setup for a huge reward down the line. 

In this guide, we’ll be going what you need to know about Vue transitions from the most basic fresh out of the box usage all the way to creating custom transitions. 

Ready to start learning all about Vue transitions? Me too. Let’s dive in. 

Why Use Transitions

While most people think transitions are just decorations, a well designed transition can…

  • Capture and direct your user’s attention
  • Emphasize important information
  • Suggest a natural flow on your website
  • Guide user’s around your page 
  • Help create a more professional brand image

All of these points well help improve the user experience of your site and improve your conversion rate. A win-win for all. 

Ok. Now that we know that transitions can be extremely beneficial to your website, let’s learn how to implement them in Vue.

Creating a Vue Transition

In order to accommodate a broad range of developers, VueJS offers a couple of ways to implement transitions:

  • CSS transition/animation styling
  • Javascript hooks to make edits to the DOM
  • Integrating 3rd party CSS/JS libraries 

Honestly, the difficulty of each of these depends on your existing knowledge. If you have more HTML/CSS experience, you’ll like using transition/animation styling. If you are coming over from React or just have more Javascript experience, manually editing the DOM is the way to go. 

For now we’ll focus on animating a single element using CSS. But don’t worry, we’ll get into the fancier stuff (multiple elements, dynamic components, the works) later.

Understanding Transition Component

The transition element is a wrapper that helps you add transition functionality to your elements. Essentially, it sets up different hooks and adds classes to your changing elements so we can style them throughout different stages of the transition. 

There are 6 different transition classes (3 for enter, 3 for leaving). 

  1. v-enter / v-leave: start state of the transition; removed once transition starts 
  2. v-enter-active / v-leave-active: active state of the transition
  3. v-enter-to / v-leave-to: end state of the transition

Note: these are the default names when you give your transition a name attribute the format of the class is name-enter, name-enter-active, and so on.

Let’s check out the simple way to add transitions.

Formatting your template code is really easy. Just choose the element that you want to transition and wrap it in a <transition> component. Something like this.

<template>
  <div>
    <button @click='visible = !visible'>Toggle Div</button>
    <transition name="fade">
      <div v-if="visible">
        Hello World
      </div>
    </transition>
  </div>
</template>

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

Easy right?

Now, we just have to add some styles to actually get the transitions working. 

Let’s use the some example styling from the Vue documentation. 

<style lang="scss">
.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;
}
</style>

Now what does this do? It’s actually pretty intuitive because it joins the classes that similar state. 

These styles say that when the transition is active, add a transition to the opacity attribute so it smoothly moves. 

Then, it sets the starting state of the enter transition and the end state of the leave to transition to zero AKA not visible. Also, just remember that when the element does not have either of the fade-enter or fade-leave-to classes, the opacity will be set to the default value of one. 

There. 

You have added transitions to your Vue app. Now, let’s look into how to get more intricate and detailed with it. 

In addition to using CSS transitions, you can also use CSS animations. 

As long as you are able to use the proper class names, you can style these components out to your heart’s content. 

Let’s move on to some more advanced techniques using Vue Transitions.

Getting a Little More Complicated

While the transition element we just built is a great overview of how components work, we’ll often encounter way more complex use cases in the real world. 

Luckily, like most of Vue, templates are very flexible and can adapt to most projects. Let’s check out some different situations. 

Getting your component to transition on load

Stupidly simple. Just add the attribute appear to your transition element like this.

<transition name="fade" appear>
      <div v-if="visible">
        Hello World
      </div>
</transition>

Transitioning between multiple elements

Again this is super simple – let’s say you have two divs that alternate between each other like this.

<transition name="fade" appear>
      <div v-if="visible">
        Option A
      </div>
      <div v-else>
        Option B
      </div>
</transition>

All you have to do is wrap them in a transition element and BAM – your transition styles will work for both. 

There are a couple of things to watch out for: 

  1. You may want to absolutely position your elements

When Vue transitions between the two elements, there will be times when both elements are visible and transitioning in/out. If you want a smooth effect, you may want to absolutely position them on top of each other. 

  1. If your elements have the same tag, you have to add a key attribute to the component. 

If your elements have the same tag, Vue will try to optimize things and only replace the content of the elements. According to the docs, it’s always best practice to add a key if you’re transitioning between multiple elements.

Transitioning between dynamic components

This is even easier than transitioning between multiple components. All you’re going to have to do is wrap your dynamic component in a transition element. It acts just like the basic use case! 

Your template code might look something like this.

<transition name="fade" appear>
      <component :is='componentType' />
</transition>

Creating a Reusable Transition Component

A great habit to get into when working in Vue is trying to design reusable components. 

This is easy to do with transitions – all we really have to do is put a transition element in the root and insert a component slot so we can add more content. 

It would look a little like this.

<template>
  <transition name="fade" appear>
    <slot></slot>
  </transition>
</template>

Now, instead of having to worry about adding your transition style, name, and everything to each component, you can just use this component and have it all taken care of.

In Conclusion

When working in Vue, transitions are a really easy way to add more style and personality to your website. 

In most cases, it’s just a few lines of template code and some CSS styles and you’re ready to go. 

Transitions are a great way to your project feel more professional and improve your user’s experience. By improving your user experience, you can keep more people on your site and boost your conversion rate. 

Happy coding!

Comments (2)

  1. Łukasz February 19, 2020
    • Matt Maribojoc February 19, 2020

Leave a Reply to Łukasz Cancel reply