Vue 3 is in beta and it’s subject to change.
Vue 3 is the up and coming version of Vue front end framework.
It builds on the popularity and ease of use of Vue 2.
In this article, we’ll look at creating various transition effects.
Transitions on Initial Render
We can apply a transition on initial render of a node with the appear attribute.
For instance, we can use it by writing:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
.bounce-enter-active {
animation: bounce-in 1.3s;
}
.bounce-leave-active {
animation: bounce-in 1.3s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.8);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div id="app">
<transition name="bounce" appear>
<p>hello</p>
</transition>
</div>
<script>
const app = Vue.createApp({});
app.mount("#app");
</script>
</body>
</html>
We just add the appear attribute to our transition component to make the transition appear when we load the element.
Transitioning Between Elements
We can add a transition between elements that are with the v-if and v-else directives.
For example, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
.bounce-enter-active {
animation: bounce-in 1.3s;
}
.bounce-leave-active {
animation: bounce-in 1.3s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.8);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div id="app">
<button @click="show = !show">toggle</button>
<transition name="bounce">
<p v-if="show">hello</p>
<p v-else>bye</p>
</transition>
</div>
<script>
const app = Vue.createApp({
data() {
return {
show: false
};
}
});
app.mount("#app");
</script>
</body>
</html>
We create a transition effect that transitions between the 2 p elements in the transition component.
The transition automatically with the v-if and v-else directives.
We can also transition between any number of elements.
For example, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
.bounce-enter-active {
animation: bounce-in 0.8s;
}
.bounce-leave-active {
animation: bounce-in 0.8s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.8);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div id="app">
<button @click="count++">increment</button>
<transition name="bounce">
<p v-if="count % 3 === 0" key="0">foo</p>
<p v-else-if="count % 3 === 1" key="1">bar</p>
<p v-else key="2">baz</p>
</transition>
</div>
<script>
const app = Vue.createApp({
data() {
return {
count: 0
};
}
});
app.mount("#app");
</script>
</body>
</html>
We have the v-else-if and v-else directives to make sure that only one is rendered at the same time.
This way, we can keep using the transition component to animate between multiple elements.
Transition Modes
If we deal with more complex animations we can set the mode prop to set the transition effect that’s run.
By default, the in-out and out-in transitions are run simultaneously.
With this prop, we can make our component apply one effect or the other.
Usually, the out-in mode is what we want.
For example, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
.bounce-enter-active {
animation: bounce-in 1.3s;
}
.bounce-leave-active {
animation: bounce-in 1.3s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.8);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div id="app">
<button @click="show = !show">toggle</button>
<transition name="bounce" mode="out-in">
<p v-if="show">hello</p>
<p v-else>bye</p>
</transition>
</div>
<script>
const app = Vue.createApp({
data() {
return {
show: false
};
}
});
app.mount("#app");
</script>
</body>
</html>
With the mode prop set, we won’t see multiple elements being animated at the same time.
Conclusion
We can create transitions between multiple elements with a few props and directives.
