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 CSS transitions and animations.
CSS Transitions
The transition a component is most commonly used with CSS transitions.
For instance, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
.fade-enter-active {
transition: all 0.3s ease-out;
}
.fade-leave-active {
transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.fade-enter-from,
.fade-leave-to {
transform: translateX(20px);
opacity: 0;
}
</style>
</head>
<body>
<div id="app">
<button @click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
<script>
const app = Vue.createApp({
data() {
return {
show: false
};
}
});
app.mount("#app");
</script>
</body>
</html>
We have the transition component that has the name prop to set the prefix for the transition class names.
We set the transition property in the CSS to look let us set the transition effects.
ease-out is for entering effects.
And cubic-bezier is our easing curve to adjust the speed of the transition as it progresses.
CSS Animations
CSS animations are applied in the same way as CSS transitions.
The different between transitions and animations is that v-enter-from isn’t removed immediately after the element is inserted.
It’s instead removed after the animationend event is triggered.
For instance, we can create animations with keyframes 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.5s;
}
.bounce-leave-active {
animation: bounce-in 1.5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
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>
</transition>
</div>
<script>
const app = Vue.createApp({
data() {
return {
show: false
};
}
});
app.mount("#app");
</script>
</body>
</html>
We have the keyframes in our CSS so that we can define our animation effects at the stages we want.
We have a transform effect during the start, when it’s halfway through, and when it ends.
Custom Transition Classes
We can set custom transition classes instead of using the preset class names.
To do that, we just have to set a few props.
The props we can set are:
enter-from-classenter-active-classenter-to-classleave-from-classleave-active-classleave-to-class
For instance, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
.enter-active {
animation: bounce-in 1.5s;
}
.leave-active {
animation: bounce-in 1.5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div id="app">
<button @click="show = !show">
Toggle
</button>
<transition
enter-active-class="enter-active"
leave-active-class="leave-active"
>
<p v-if="show">hello</p>
</transition>
</div>
<script>
const app = Vue.createApp({
data() {
return {
show: false
};
}
});
app.mount("#app");
</script>
</body>
</html>
We have the enter-active and leave-active classes to instead of the default class names because we set the enter-active-clas and leave-active-class props.
They override the default class names.
Conclusion
We can change the name of animations and transitions.
There’s a slight difference between transitions and animations.
