Online Web Development Tutorials

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>
 </transition>
</div>

<!DOCTYPE html>
<html lang="en">
<head>
   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
     <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>
		 </transition>
     </div>
     <script>
     new Vue ({
        	el: '#vue_transition',
		data: {
		          show : true,
			  styleObj : 
			    {
			       fontSize : '24px',
			       color : '#888'
			    }
		       },
		 methods : {
			   }
	})
   </script>
   <style>
      .fade-enter-active, .fade-leave-active { 
	      transition:opacity 1s
      }
     .fade-enter, .fade-leave-to {
	      opacity:0
       }
  </style>
 </body>
</html>

VueJs Transition