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 parts of a transition.
Timing
UI transitions have the timing to let us set the duration of the animation.
We may have different timing for transitions between different states.
If a transition has no intermediate state, then the timing is between 0.1s and 0.4s.
Easing
The easing lets us add some depth to our animation.
Without easing, the animation would be linear and uninteresting.
We want to use ease-out for entrances and and ease-in for exits.
Enter & Leave Transitions
We can use the transition wrapper component to add our enter and leave transitions.
For instance, we can add a simple transition with the transition component by writing:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 1s ease;
}
.fade-enter-from,
.fade-leave-to {
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 add the transition to the p element by wrapping it with the transition component.
Then we set the name prop of it to the prefix of the classes we’ll use for styling the transition.
We set it to fade , so all the transition classes starts with fade- .
We have the fade-enter-active , fade-leave-active classes to show a fading effect.
And we have the fade-enter-from and fade-leave-to classes to make the content transparent to maker the content disappear when show is false .
Vue will detect whether the target element has CSS transitions or animations applied.
CSS transition classes will be added or removed at appropriate timings.
If no CSS transitions or animations are detected and no JavaScript hooks are provided, then ODM operations will be run on the next browser animation frame.
Transition Classes
There’re several transition classes that we can apply styles to.
v-enter-from is applied before the element is inserted and remove one frame after the element is inserted.
v-enter-active is applied before the animation is inserted and removed when the transition or animation finishes.
v-enter-to is added one frame after the element is inserted and removed when the transition or animation finishes.
v-leave-from is applied immediately when a leaving transition is triggered and removed after 1 frame.
v-leave-active is applied during the entire leaving phase.
It’s added immediately when the leave transition is triggered and removed when the transition or animation finishes.
v-leave-to is added one frame after a leaving transition is triggered and removed when the transition or animation finishes.
Conclusion
We can add transitions easily with the transition component.
Once we used that, we can add CSS style to apply the effects we want.
