What Is Vuejs Transition Component and How to Use It?

1. What is the <Transition> component?

Vue.js offers us the <Transition> component, which allows us to achieve the effect of smooth transitions between component states. It makes it easier to create enter and leave animations for displayed application elements. The <Transition> component is based on specific points such as: "before-enter", "enter", "after-enter". We can also define these points for the leave state - "before-leave", "leave", "after-leave". By defining them appropriately, we can control various properties of the transition, e.g. duration, delay, softening functions, etc. The use of smooth transitions and animations has a positive impact on the interactive UI and ensures a positive user experience.

2. How to use the <Transition> component

The <Transition> component is a pre-existing component, meaning it's readily accessible in any component's template without requiring explicit registration. Transitions are typically triggered by conditional display via v-show directive or conditional rendering via v-if directive.

1
2
3
<Transition name="button">
  <button v-if="isVisible">Open</button>
</Transition>

3. Transition CSS classes

The component generates a series of classes during the transition period, which can be utilized for more advanced animation effects. Here are some of these classes:

v-enter-from: Added before the start of the enter transition.

v-enter-active: Added during the enter transition.

v-enter-to: Added after the enter transition has finished.

v-leave-from: Added before the start of the leave transition.

v-leave-active: Added during the leave transition.

v-leave-to: Added after the leave transition has finished.

When we provide a name through the "name" parameter, it will be used as a prefix for the CSS classes, allowing for personalized class names according to the project's needs. For example, if we set the "name" parameter to the value "button", the CSS classes related to the transition will have names such as "button-enter", " button-enter-active", "button-enter-to", "button-leave", "button-leave-active", "button-leave-to". This enables us to easily identify classes associated with a particular transition and customize their styling according to our preferences.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<style scoped lang="scss">
.button-enter-from,
.button-leave-to {
opacity: 0;
transform: translateX(10px);
}

.button-enter-to,
.button-leave-from {
opacity: 0;
transform: translateX(0px);
}

.button-enter-active,
.button-leave-active {
transition: all 0.5s;
}
</style>

4. Transition modes

The <Transition> component can also specify the order in which elements are inserted and removed. This is possible through the mode parameter, whose default value is "in-out". In this case, the entering animation begins only after the leaving animation has finished. The second mode is "out-in", which means, the leave transition after the enter transition completes.

1
2
3
<Transition name="button" mode="out-in">
  <button v-if="isVisible">Open</button>
</Transition>

5. Sample implementation of Vue <Transition> component

Here's a sample implementation of switching between dark and light mode using the Vue <Transition> component:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<template>
<Transition name="button" mode="out-in">
<button v-if="lightMode" @click="handleModeChange">Light mode</button>
<button v-else @click="handleModeChange">Dark mode</button>
</Transition>
</template>

<script setup lang="ts"> import { ref} from "vue";
let lightMode = ref<boolean>(true);
function handleModeChange() {
lightMode.value = !lightMode.value;
}
</script>

<style scoped lang="scss">
.button-enter-from,
.button-leave-to {
opacity: 0;
transform: translateX(10px);
}
.button-enter-to,
.button-leave-from { 
opacity: 0;
transform: translateX(0px);
}

.button-enter-active,
.button-leave-active {
transition: all 0.5s;
}
</style>

In the above example, we have a button that toggles between dark and light modes upon clicking. The buttons are wrapped inside a <Transition> component, which change mode value when switching between modes.

name="button":This sets the name of the transition. It's used to define the CSS classes for the transition.

mode="out-in":This sets the mode of the transition. The "out-in" mode first triggers the leave transition on the current element, then triggers the enter transition on the new element. It ensures smooth transition effects when elements are replaced.

Improve your UX/UI today

Creating smooth transitions between states using the <Transition> component is very simple and produces brilliant results. It significantly improves the positive user experience and, consequently, the attractiveness of the application. In addition, Vue.js also offers <TransitionGroup> which can be used to create transitions for a list of elements. Improve your UX/UI today and drop us a line here.

Written by:

Ewelina Zwolenik

Frontend Developer

Ewelina is an amazing frontend developer who's great at working with Vue.js, HTML, CSS, and Tailwind CSS. She has a sharp eye for design and knows how to turn ideas into beautiful, responsive websites and apps that look great on any device.

What is vuejs Transition component and how to use it?