VueJs Transition

transition serve as transition effects for single element/component. The only applies the transition behavior to the wrapped content inside; it doesn’t render an extra DOM element, or show up in the inspected component hierarchy.

Below the example

<div id="vue_transition">
  <button v-on:click = "show = !show">Click Me</button><br />
  <transition name = "fade">
  <p v-show="show" v-bind:style="styleobj">My Animation Using VueJs</p>
<!DOCTYPE html>
<html lang="en">
   <script type="text/javascript" src=""></script>
     <div id="vue_transition">
	     <button v-on:click = "show = !show">Click Me</button>
		  <transition name = "fade">
		  <p v-show="show" v-bind:style="styleObj">My First Animation Using VueJs</p>
     new Vue ({
        	el: '#vue_transition',
		data: {
		          show : true,
			  styleObj : 
			       fontSize : '24px',
			       color : '#888'
		 methods : {
      .fade-enter-active, .fade-leave-active { 
	      transition:opacity 1s
     .fade-enter, .fade-leave-to {


My First Animation Using VueJs