Introduction

Vuejs is an amazing framework for modernizing technologies in web development. Similarly, the ecosystem around Vuejs is very diverse. Many libraries allow you to do almost anything: graphics, image cropping, displaying maps or even managing a complex state system with Vuex.

Although these tools are generally accessible through libraries that can be implemented in the Vuejs ecosystem, there are still components native to Vuejs that allow you to create complex interactions with vis components.

Among these native components, there is one allowing you to create complex transitions and animations for your components.

In this article, we will see in more detail how to use the transition component in real examples with Vuejs 3.

The name of the classes applied during the transitions have changed between version 2 and 3 of Vuejs.

What is this component for ?

This component allows you to quickly and easily add animations and transitions to your components without having to install third-party libraries.

This component will work thanks to the style that you can customize according to your desires.

Let's be more specific.

In order to create a transition using the native vuejs component, you only have to wrap the elements you want to apply the transition to in the <transition> component. You can then specify a name for that specific transition.

All the elements within the transition component must be wrapped into a global component like a div. In other words, the transition component can not work properly if it has multiple children.

Then you just have to add the v-show or v-if attribute to conditionally show the direct child of the transition component.

Then you only have to define the transition to apply using the style part of your view file.

What makes the transition component so special and very interesting is the fact that it automatically adds classes related to the state of the transition to the child element of the transition component.

In the example above, the letter v in the class name corresponds to the name of the transition that you filled in earlier in the transition component.

For example, by putting the name fade, the classes will be :

• fade-enter-from
• fade-enter-to
• fade-leave-from
• fade-leave-to
• fade-enter-active
• fade-leave-active

As we can see in the image above, states v-enter-from and v-leave-to of the child elements of the transition component are identical. As well as the states v-enter-to and v-leave-from.

Now let's see what this component looks like in action.

Create the basic vue file structure

Let's start by creating a classic view file in which we will have the following template.

<template>
  <section>
    <button @click="toggleDiv()">{{ showDiv ? 'Hide' : 'Show' }}</button>
    <div id="container" v-show="showDiv">
      Modi ipsam facere repellendus et rerum laudantium repellendus sint.
      Ratione iusto saepe pariatur amet reprehenderit atque. Sit excepturi
    </div>
  </section>
</template>

Then, in the script part of your vue file, you will have to create a variable in the data section which will conditionally display the elements in the transition component.

import { defineComponent } from 'vue';
export default defineComponent({
  data() {
    return {
      showDiv: false,
    };
  },
  methods: {
    toggleDiv() {
      this.showDiv = !this.showDiv;
    },
  },
});

In this example, I created a variable called showDiv which is a boolean. If this variable is true, then the message will be displayed and vice versa.

I also created a function to invert the value of this variable when you click on the button.

Thanks to these two elements, we will be able to conditionally display the div containing text.

Now let's add the transition component.

Transition component

As we mentioned in the second part, to add a transition to the div containing text, we will have to wrap it with the transition component.

<template>
  <section>
    <button @click="toggleDiv()">{{ showDiv ? 'Hide' : 'Show' }}</button>
    <transition name="expand">
      <div id="container" v-show="showDiv">
        Modi ipsam facere repellendus et rerum laudantium repellendus sint.
        Ratione iusto saepe pariatur amet reprehenderit atque. Sit excepturi
      </div>
    </transition>
  </section>
</template>

We will name our transition fade. The rest of the work will be done in the style part of the file.

If we refer to what we mentioned previously, we will be able to group the style of states v-enter-from and v-leave-to as well as v-enter-to and v-leave-from.

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

.fade-enter-to,
.fade-leave-from {
  opacity: 1;
  transform: translateY(0px);
}

These attributes will make the div containing text appear but also perform a Y translation to make the transition more pleasant.

Finally, we will define the duration as well as the type of transition that we want. Finally, we will define the duration as well as the type of transition that we want. In our example, we will apply a transition on the opacity and transform fields.

$transition-duration: 0.5s;

.fade-enter-active,
.fade-leave-active {
  transition: opacity $transition-duration ease-in-out,
    transform $transition-duration ease-in-out;
}

In the code example above, I used the SCSS language but you can also use classic CSS by replacing the SCSS variable with the duration directly.

Finally, here is the result that we get when we click on the button to conditionally display the part containing text.

The example used in this article is available on Github : MrAnyx/vue-transition-example.

Conclusion

All in all, this tool is a great way to add transitions and animations to your Vuejs application. Moreover, the main advantage of this component is that you can fully customize your transitions. Since the transition is based on CSS attributes, it allows you to create the transitions you want.

You can also create different animations within the same transition component but that will be the subject of another article on this subject.

Cover by Mark Cruz