EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login

Vue.js Transition

By Asapu HarikaAsapu Harika

Home » Software Development » Software Development Tutorials » Software Development Basics » Vue.js Transition

Vue.js Transition

Introduction to Vue.js Transition

Vue.js transition has various ways of applying the transition to HTML elements when elements are added or updated in the DOM. Working with these Vue.js transitions is much more easier as Vue.js provides a transition component that goes around/ wraps the element or component which is due of animation. Transition, as the word sounds, is when a change occurs while something moves from one state to another. State in the sense starting point and the ending point. Vue applies transition effects when elements are inserted, updated, or removed from the DOM.

How does Vue.js Transitions Work?

Let us explore how these Vue transitions work,

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

While designing a transition, with Vue’s ‘transition’ component, we need to check for default style and how does the element actually appear when not in 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. Default transitioning style for any HTML element is defined by the browser. We need not define the default styling as the element 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 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
  • Try finding out a JavaScript transitioned hooks object which might be registered through Vue.transition(id, hooks) or by passing with id ‘my-transition’. If found, appropriate transition hooks are called at different stages of transition.
  • If in case, there are no JavaScript hooks found and no CSS transition/ animations, then DOM operations like insertion and deletion will be executed on the next frame immediately.

Listing out some of the transition effects on DOM elements,

  • Using JavaScript to directly manipulate DOM elements during transition hooks
  • 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/marked@0.3.6"></script>
<script src="https://unpkg.com/lodash@4.16.0"></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, text fades in as below,

Popular Course in this category
Software Testing Training (9 Courses, 2 Projects)9 Online Courses | 2 Hands-on Projects | 60+ Hours | Verifiable Certificate of Completion | Lifetime Access
4.5 (4,957 ratings)
Course Price

View Course

Related Courses
Selenium Automation Testing Training (9 Courses, 4+ Projects, 4 Quizzes)Appium Training (2 Courses)JMeter Testing Training (3 Courses)

Vue.js Transition-1.2

On clicking again, text fades out

Vue.js Transition-1.3

Text was being faded out.

There are 6 transition classes to handle the element being displayed or removed, Enter transitions happen when the component is being displayed or enabled. Classes under Enter transition are v-enter, v-enter-to and v-enter-active Leave transitions happen when the component is being removed or disabled. Classes under Leave transitions are v-leave, v-leave-to and v-leave-active

Prefix v- being a default while using a transition element.

Let X and Y be two separate states for transitioning

  • V-enter: It is the class used to define what X part of transition is, defines the starting state and added before the element is inserted.
  • V-enter-to: It is the class used to define what Y part of transition is, defines the ending state and removed when transition or animation is complete
  • V-enter-active: It is the class used to define how to move from X to Y, active state and applicable during entering phase. It also defines the duration, easing curve and delay in entering transitions
  • V-leave: It is the class used to define the starting state to leave.
  • V-leave-to: It is the class used to define the ending state to leave.
  • V-leave-active: It is the class used to define the active state for leaving, active state and applicable during leaving phase. Applied when leave transition is triggered, removed when transition is complete. It also defines the duration, easing curve and delay in 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/marked@0.3.6"></script>
<script src="https://unpkg.com/lodash@4.16.0"></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 the 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/marked@0.3.6"></script>
<script src="https://unpkg.com/lodash@4.16.0"></script>
<link
href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1"
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 on clicking,

Output-3.2

On clicking again,

Output-3.3

Note: All the transitions shown here can not be captured through a screenshot.

With this, we come to an end of the topic ‘Vue.js Transition’. We have seen what transitions are meant to be in Vue.js along with its syntax. 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 over 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 how does vue.js transitions work? along with different examples and its 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

All in One Software Development Bundle (600+ Courses, 50+ projects)

600+ Online Courses

50+ projects

3000+ Hours

Verifiable Certificates

Lifetime Access

Learn More

0 Shares
Share
Tweet
Share
Primary Sidebar
Software Development Basics
  • Basics
    • Types of Algorithms
    • Vue.js?nextTick
    • Vue.js Transition
    • Page Replacement Algorithms
    • What is CLI
    • Open Source Software
    • Solve Problems With Technology (Simple)
    • What is Application Software & Types
    • System Software Tools
    • Typography App
    • Software as a Service (Saas)
    • Icon Font Pack
    • Interpret Results Using ANOVA Test
    • Blogging Insights Your Analytics
    • Increase Productivity Technology
    • Free Multimedia Software
    • Information Technology Benefits
    • What is SPSS and How Does It Work
    • Learn to Code For Beginners (Advance)
    • Uses of Coding
    • Uses Of Raspberry Pi
    • What Is System Design
    • Introduction to NLP
    • What is MapReduce
    • What is SoapUI
    • What is MVC
    • What is Multithreading
    • What is Elasticsearch
    • What is Neural Networks
    • What is Swift
    • What is PLC
    • What is Open Cart
    • What is XML
    • What is Mainframe
    • What is JMS
    • What is Cognos
    • What is Open Source
    • What is Bot
    • What is SOAP
    • What is COBOL
    • What is GraphQL
    • What is Microcontroller
    • What is Open-Source License
    • What is Visual Studio Code
    • What is Pandas
    • What is Hypervisor
    • What is Common Gateway Interface
    • What is IDE?
    • What is SSRS?
    • What is MVC Design Pattern
    • What is Application Server
    • What is GPS
    • What is NumPy
    • What is NLP
    • What is Botnet
    • What is Assembly Language
    • System Analysis And Design
    • HTTP Caching
    • What is Buffer Overflow
    • What is Ajax
    • What is Joomla
    • What is Appium
    • What is SVN
    • What is SPSS
    • What is WCF
    • What is Groovy
    • What is Clickbait
    • What is SOA
    • What is GUI
    • What is FreeBSD
    • What is WebSocket
    • What is WordPress
    • What is OSPF
    • What is Coding
    • CentOS Commands
    • What is Raspberry Pi
    • HTTP Cookies
    • What is Hub?
    • What is Bridge
    • What is Switch
    • What is Internet Application
    • What is Sensors
    • What is Proximity Sensors
    • What is Full Stack
    • System Design Interview Questions
    • What is Salesforce technology
    • What is Salesforce Sales Cloud
    • What is OOP
    • What is CMD
    • What is React
    • What is DSS
    • What is SVG
    • What is Apex
    • What is Desktop Software
    • Tor Browser, Anonymity and Other Browsers
    • Avoid Pitfalls of Shadow IT
    • Freelance Web Graphic Designer
    • What is Storage Virtualization
    • What is Web Services?
    • What is Social Networking?
    • What is Microservices Architecture?
    • Microservices Tools
    • Advantages of Microservices
    • Uses of Internet
    • Software Platforms
    • Uses of Internet for Business
    • Architecture of Web Services
    • Web Application Testing
    • Advantages of Web Service
    • CPU Virtualization
    • Types of Web Services
    • Web Services Testing
    • What is RabbitMQ?
    • RabbitMQ Architecture
    • Advantages of Bitcoin
    • Penetration Testing Services
    • Puppet Alternatives
    • What is Memcached?
    • What is Browser?
    • Types of Satellites
    • Model Driven Architecture
    • Types of Variables in Statistics
    • Integration Architecture
    • What is API Integration?
    • What is Grid Computing?
    • Asus File Manager
    • What is GPRS?
    • What is Gradle?
    • What is Basecamp?
    • Software System Architecture
    • GSM Architecture
    • What is Nagios?
    • AppDynamics Tool
    • Logical Architecture
    • What is Microsoft Planner
    • What is Circuit Switching
    • What is ARM?
    • Embedded Control Systems
    • Types of Embedded Systems
    • What is Bitbucket?
    • Requirement Engineering
    • What is WAP
    • What is Registry?
    • What is Dynatrace?
    • What is Digital Forensics?
    • Hardware Virtualization
    • AppDynamics Careers
    • Bandwidth Monitoring Tools
    • Ping Monitor Tools
    • Dynatrace Tools
    • What is Trello?
    • What is AppDynamics?
    • What is Remote Desktop?
    • What is Extranet?
    • What is LTE Network?
    • What is Firebase?
    • Website Monitoring Tool
    • Number Systems
    • Service Desk Manager
    • Static Website
    • Dynamic Website
    • What is Email?
    • What is URL Link?
    • What is Program?
    • What is Lock Screen?
    • What is Grafana
    • Unguided Media Transmission
    • IT Governance
    • IT Governance Framework
    • Remote Support Softwares
    • What is Unification?
    • Topological Map
    • What is LAMP?
    • USB Flash Drive
    • Software Development Models
    • Digital Circuit
    • What is Webpack?
    • Fault Tolerance
    • What is DSL Modem?
    • What is Mozilla Firefox?
    • What is Vagrant?
    • Types of Research Methodology
    • Grafana Plugins
    • Ionic Components
    • Nginx Version
    • RabbitMQ Routing Key
    • What is Svelte?
    • CakePHP
    • Telegram Features
    • What is CDN
    • RethinkDB
    • Symfony Version
    • CentOS add sudo user

Related Courses

Software Testing Training

Selenium Training Certification

Appium Training

JMeter Certification Training

Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Corporate Training
  • 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

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

EDUCBA Login

Forgot Password?

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you
Book Your One Instructor : One Learner Free Class

Let’s Get Started

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

EDUCBA

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

Web development, programming languages, Software testing & others

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

Special Offer - Software Testing Training Learn More