EDUCBA

EDUCBA

MENUMENU
  • Explore
    • Lifetime Membership
    • All in One Bundles
    • Fresh Entries
    • Finance
    • Data Science
    • Programming and Dev
    • Excel
    • Marketing
    • HR
    • PDP
    • VFX and Design
    • Project Management
    • Exam Prep
    • All Courses
  • Blog
  • Enterprise
  • Free Courses
  • Login
Home Software Development Software Development Tutorials Software Development Basics Vue.js Transition

Vue.js Transition

Asapu Harika
Article byAsapu Harika
Priya Pedamkar
Reviewed byPriya Pedamkar

Updated June 16, 2023

Vue.js Transition

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.

ADVERTISEMENT
Popular Course in this category
VUE JS Course Bundle - 4 Courses in 1

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

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:

Vue.js Transition-1.1

On clicking on the button, the text fades in as below,

Vue.js Transition-1.2

On clicking again, the text fades out

Vue.js Transition-1.3

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:

Output-2.1

On clicking on the button, text bounces on the console,

Vue.js Transition-2.2

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:

Output-3.1

When clicking,

Output-3.2

On clicking again,

Output-3.3

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 –

  1. Vue.js Computed
  2. Angular 2 vs Vue JS
  3. Vue.JS vs React.JS
  4. Vue.js vs Angular
ADVERTISEMENT
MICROSOFT POWER BI Course Bundle - 8 Courses in 1
34+ Hours of HD Videos
8 Courses
Verifiable Certificate of Completion
Lifetime Access
4.5
ADVERTISEMENT
CYBER SECURITY & ETHICAL HACKING Course Bundle - 13 Courses in 1 | 3 Mock Tests
64+ Hours of HD Videos
13 Courses
3 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5
ADVERTISEMENT
MICROSOFT AZURE Course Bundle - 15 Courses in 1 | 12 Mock Tests
63+ Hour of HD Videos
15 Courses
12 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5
ADVERTISEMENT
KALI LINUX Course Bundle - 6 Courses in 1
20+ Hours of HD Videos
6 Courses
Verifiable Certificate of Completion
Lifetime Access
4.5
Primary Sidebar
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

ISO 10004:2018 & ISO 9001:2015 Certified

© 2023 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

By continuing above step, you agree to our Terms of Use and Privacy Policy.
*Please provide your correct email id. Login details for this Free course will be emailed to you

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more

🚀 Extended Cyber Monday Price Drop! All in One Universal Bundle (3700+ Courses) @ 🎁 90% OFF - Ends in ENROLL NOW