Skip to content

All topics  /  Vue

Vue Js Transitioning Single Components Example

Vue ·

When “Vue Js Transitioning Single Components Example” moves through design, development and browser testing, this useful resource can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the official Vue website before adopting it in production.

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

More on this topic