Vue.js Transitions

Vue.js Transitions

In this post we will show you Vue.js Transitions, hear for Vue.js Transitions we will give you demo and example for implement.

Transitions in Vue allow you to apply effects to elements when they are inserted, updated or removed from the DOM. For example, the classic fade:

The transition system has been a feature of Vue since the first version, but in version 2 there have been some changes, mainly that it is now completely component-based (which I think is much better…more on this later).

What Vue.js Transitions do

Transitions can be tricky to understand. Here’s what you need to know to get started:

The transition system can work with CSS (e.g. visual effects like fading) but can also be used with JS (e.g. transitioning data between different values).
CSS transitions work in conjunction with the CSS3 transition and animation features. The CSS does the actual transitioning, but Vue handles stuff like when to add/remove appropriate classes etc.

Vue.js Transitions Example

Let’s say we want to fade an element in or out when it is added/removed from the DOM, just like in the GIF at the start of this story.

Thinking just about CSS for now, to get a fade effect we might do something like this:

.in {
  opacity: 1;
  transition: opacity .6s ease-in-out;
}
.out {
  opacity: 0;
}

When we want to see the element, we use thein class, when we don’t, we use the out class. We use the CSS3 transition rule to provide the fade effect.

So where would Vue come in to this? It can handle the adding and removing of the in and out classes!

Working example
Let’s make the above example into something that will actually work. We’re going to have a button that will show/hide the element:

<div id="app">
  <button v-on:click="show = !show">Toggle button</button>  
  <p v-if="show">Now you can see me</p>
</div>

There are two steps to get this element to fade:

Vue.js Transitions Step 1 — Wrap the element with a transition component

<transition name="fade">
  <p v-if="show">Now you can see me</p>
</transition>

The transition component tells Vue to apply a transition to the element within. Since it is an abstract component it will not be rendered in the DOM. Note that we’ve given it the name “fade” but you can name it whatever you want.

Vue.js Transitions Step 2 — Create the CSS classes needed for your transition effect.

Vue will add CSS classes to the element at the appropriate times to allow you to create your transition effect:

  • v-enter before the element is inserted, removed after one frame.
  • v-enter-active before element is inserted, removed when transition/animation finishes.
  • v-leave when leave transition is triggered, removed after one frame.
  • v-leave-active when leave transition is triggered, removed when transition/animation finishes.

Since we named our transition “fade”, Vue will change the class names to fade-enter, fade-leave etc instead of the generic v- prefix. (Note that you can customise your transition classes to whatever you want if you need to make your transition compatible with a 3rd party CSS library, check the Vue docs to learn how).

Here’s how we’d implement our CSS given the Vue classes:

.fade-enter-active, .fade-leave-active {
  opacity: 1;
  transition: opacity .5s ease-in-out;
}
.fade-enter, .fade-leave-active {
  opacity: 0
}

And that’s it! Now the full code:


<style>
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s
  }
  .fade-enter, .fade-leave-active {
    opacity: 0
  }
</style>

<div id="app">
  <button v-on:click="show = !show">Toggle</button>
  <transition name="fade">
    <p v-if="show">Now you see me</p>
  </transition>
</div>

<script type="text/javascript">
  new Vue({
    el: '#app',
    data: {
      show: true
    }
  });
</script>

Hope this code and post will helped you for implement Vue.js Transitions. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve onlincode. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs onlincode.org

Leave a Comment

Your email address will not be published. Required fields are marked *

9  +    =  18

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US