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 how to add transitions with Vue 3.
Transitions
We can add transitions to our Vue app with various components
The transition component helps us add enter and leave transitions which are triggered by v-if .
Transition modes let us change the ordering of a transition.
Transitions with multiple components can be added with the transition-group component.
We can transition to different states in an app with watchers .
Class-based Animations & Transitions
We can add transitions by binding to a class.
For example, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
.shake {
animation: shake 1s cubic-bezier(0.31, 0.07, 0.39, 0.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
@keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
</style>
</head>
<body>
<div id="app">
<div :class="{ shake: on }">
<button @click="on = !on">toggle</button>
<p v-if="on">hello world!</p>
</div>
</div>
<script>
const app = Vue.createApp({
data() {
return {
on: false
};
}
});
app.mount("#app");
</script>
</body>
</html>
to add the shaking transition effect to our div.
We have the translate3d to add the shaking left and right,
Negative is left and positive is right.
The shake class has the shake transition.
cubic-bezier is the easing function, which makes the transition non-linear.
transform keeps the div in place.
We apply the shake class when on is true , so when we click the toggle button to set on to true , we’ll see the elements shake.
Transitions with Style Bindings
We can also add transitions with style bindings.
For example, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<div
@mousemove="onMouseMove"
:style="{ backgroundColor: `rgb(${x}, 80, 50)` }"
class="movearea"
>
<p>x: {{x}}</p>
</div>
</div>
<script>
const app = Vue.createApp({
data() {
return {
x: 0
};
},
methods: {
onMouseMove(e) {
this.x = e.clientX;
}
}
});
app.mount("#app");
</script>
</body>
</html>
When our mouse moves, then the onMouseMove method is called.
This gets the x coordinate of the mouse and set it to the this.x state.
Then we used x to set the background color by changing the first value of rgb .
Therefore, when we move our mouse, the background color will change.
Performance
CSS animations has better performance than using JavaScript to change the position of our elements.
Every redraw with JavaScript is an expensive operation, so we try to eliminate them if we can.
CSS animations is also faster because browsers have hardware acceleration capabilities.
Properties like perspective, backface-visibility, and transform: translateZ(x) will trigger a browser’s hardware acceleration capabilities.
Conclusion
Vue lets us animate our elements with CSS and class or style bindings.
