Vue Js Transitioning Single Components Example

Bootstrap , Bootstrap 4 , Html , Css , Vue.Js




Hi Guys,

In this example, I will show you how to create transitioning single components example in vue.js.Vue provides a transition wrapper component, allowing you to add entering/leaving transitions for any element or component in the following contexts.

->Conditional rendering (using v-if)

->Conditional display (using v-show)

->Dynamic components

->Component root nodes

Here, I will give you full example for simply transitioning single components using vue.js as bellow.


<!DOCTYPE html>



<title>Vue Js Transitioning Single Components Example</title>


.fade-enter-active, .fade-leave-active {

transition: opacity .5s;


.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {

opacity: 0;



<link rel="stylesheet" type="text/css" href="">

<script type="text/javascript" src=""></script>


<body class="bg-dark">

<div class="container">

<div class="col-md-6 offset-md-3">

<div class="card mt-5">

<div class="card-header">

<h5>Vue Js Transitioning Single Components Example</h5>


<div class="card-body">

<div class="row">

<div class="col-md-12">

<div id="demo">

<button v-on:click="show = !show" class="btn btn-success btn-block">

Click Toggle


<transition name="fade" class="mt-5 text-center">

<h1 v-if="show"></h1>









<script src=""></script>


Vue.config.devtools = true

new Vue({

el: '#demo',

data: {

show: true






When an element wrapped in a transition component is inserted or removed, this is what happens:

->Vue will automatically sniff whether the target element has CSS transitions or animations applied. If it does, CSS transition classes will be added/removed at appropriate timings.

->If the transition component provided JavaScript hooks, these hooks will be called at appropriate timings.

->If no CSS transitions/animations are detected and no JavaScript hooks are provided, the DOM operations for insertion and/or removal will be executed immediately on next frame (Note: this is a browser animation frame, different from Vue’s concept of nextTick).

It will help you....