Updated June 16, 2023
Introduction to Vue.js Transition
Working with these Vue.js transitions is much easier as Vue.js provides a transition component that goes around/ wraps the element or component due to animation. As the word sounds, the transition is when a change occurs while something moves from one state to another. State, in a sense starting point and the ending point.
How does Vue.js Transitions Work?
Let us explore how these Vue transitions work,
While designing a transition with Vue’s ‘transition’ component, we must check for default style and how the element appears when not in the transition state. Let me explain with a simple example; We want a text to transition on and off the screen and fade the text as it transitions; here, the default style should be opacity:1 as this would be the style transition on and off the screen. The browser defines the default transitioning style for any HTML element. We need not define the default styling as the component appears in the same default style.
Syntax:
<div v-if="show" transition="my-transition"></div>Attribute ‘transition’ can be used along with,
- v-if: Conditional rendering of a block
- v-show: Conditional displaying of an element
- v-for: Rendered for insertion and removal of an element from DOM for animation changes
- Dynamic components: Used to switch between multiple components
When an element is inserted or removed from DOM, Vue will:
- Automatically check whether the target element has CSS transitions or animations, and hence add or remove the CSS classes
- To register a JavaScript transition hooks object, you can use the Vue.transition(id, hooks) method or pass the ID ‘my-transition.’ If a transition with the specified ID is found, the corresponding transition hooks will be called at different stages of the transition process.
- Without JavaScript hooks or CSS transitions/animations, DOM operations such as insertion and deletion will be performed immediately on the next frame.
Listing out some of the transition effects on DOM elements,
- Using JavaScript to manipulate DOM elements during transition hooks directly
- Integration of 3rd party CSS animations
- Used for positioning of SVG nodes
- State transitions help in setting size and other properties of elements
- Integration of 3rd part JavaScript animation libraries
- Automatically applying classes for CSS transitions or animations
- Animating numbers, calculations, and colors used for displaying
Examples of Vue.js Transition
Following are the examples are given below:
Example #1 – Simple Fade in and Out Transition
Code:
<!DOCTYPE html>
<html>
<head>
<title>Vue.js transition</title>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></script>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 2s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
</head>
<body>
<div id="demo_transition_fade">
<button v-on:click="show = !show">
Click Here
</button>
<transition name="fade">
<p v-if="show">Text is shown in a transition mode</p>
</transition>
</div>
<script>
new Vue({
el: "#demo_transition_fade",
data: {
show: false
}
});
</script>
</body>
</html>Output:
On clicking on the button, the text fades in as below,
On clicking again, the text fades out
Text was being faded out.
The classes v-enter, v-enter-to, and v-enter-active fall under entering transition.
Prefix v- being a default while using a transition element.
Let X and Y be two separate states for transitioning
- V-enter: The class defines the starting state of the X part of the transition and is added before the element is inserted.
- V-enter-to: The class defines the ending state of the Y part of the transition and is removed when the transition or animation is complete.
- V-enter-active: The class defines the active state during the entering phase and specifies how to move from the X state to the Y state. It includes the duration, easing curve, and delay for the entering transitions.
- V-leave: The class defines the starting state for the leave transition.
- V-leave-to: The class defines the ending state for the leave transition.
- V-leave-active: The class defines the active state during the leaving phase. It also includes the duration, easing curve, and delay for the leaving transitions.
Example #2 –Bounce transition of text
Code:
<!DOCTYPE html>
<html>
<head>
<title>Vue.js bounce transition</title>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></script>
<style>
.bounce-enter-active {
animation: bounce-in 0.9s;
}
.bounce-leave-active {
animation: bounce-in 1.5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.4);
}
100% {
transform: scale(1.1);
}
}
</style>
</head>
<body>
<div id="demo_transition_bounce">
<button @click="show = !show">Click Here</button>
<transition name="bounce">
<p v-if="show">
Vue.js transition bounce is being shown here using v-if
</p>
</transition>
</div>
<script>
new Vue({
el: "#demo_transition_bounce",
data: {
show: false
}
});
</script>
</body>
</html>Output:
On clicking on the button, text bounces on the console,
Similarly, on clicking again, bounces out of the console.
Example #3 – Custom Transition Classes in Vue.js
Code:
<!DOCTYPE html>
<html>
<head>
<title>Vue.js customized transition</title>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></script>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]"
rel="stylesheet"
type="text/css"
/>
</head>
<body>
<div id="custom-transition">
<button @click="show = !show">
Click Here
</button>
<transition
name="custom-classes-transition"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>
<p v-if="show">Transitions classes being customized</p>
</transition>
</div>
<script>
new Vue({
el: "#custom-transition",
data: {
show: true
}
});
</script>
</body>
</html>Output:
When clicking,
On clicking again,
With this, we come to an end of the topic ‘Vue.js Transition.’ Illustrated a few examples through which we have simple kind of transitions. Got to know how Vue.js transitions work and what are all the classes of transitions, enter/ leave transitions. With this fundamental knowledge of transitions, it is way much easier to see how CSS animations work which will also help us to understand JavaScript animations.
Recommended Articles
This is a guide to Vue.js Transition. Here we also discuss the introduction and working of vue.js transitions along with different examples and code implementation. You may also have a look at the following articles to learn more –
