Vue Js Transitioning Single Components Example

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

Nicesnippets

205

29-07-2020


Vue Js Transitioning Single Components Example

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.

Example


<!DOCTYPE html>

<html>

<head>

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

<style>

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

transition: opacity .5s;

}

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

opacity: 0;

}

</style>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>

<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>

<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

</button>

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

<h1 v-if="show">Nicesnippets.com</h1>

</transition>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>

<script>

Vue.config.devtools = true

new Vue({

el: '#demo',

data: {

show: true

}

})

</script>

</body>

</html>

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....