Vue

HTML

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
   
      <div id = "app">
         <button v-on:click = "show = !show">Click Me</button>
         <transition name = "fade">
            <p v-show = "show" v-bind:style = "styleobj">Show/Hide Header with Animation</p>
         </transition>
      </div>
   
   </body>
</html>

CSS

.fade-enter-active, .fade-leave-active {
            transition: opacity 2s
         }
         .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
            opacity: 0
         }

Vue

var vm = new Vue({
            el: '#app',
            data: {
               show:true,
               styleobj :{
                  fontSize:'50px',
                  color:'green'
               }
            },
            methods : {
            }
         });