Vue.js CSS transition example

HTML

<script src="http://vuejs.org/js/vue.min.js"></script>
<div id="anim" class="demo">
    <span v-if="show" v-transition="bounce" v-text="text">asdasdasdassdasd</span>
    <br><button v-on="click: update">Change text</button>
</div>

CSS

.bounce-enter {
    -webkit-animation: bounce-in .5s;
    animation: bounce-in .5s;
  }
 
  @keyframes bounce-in {
    0% {
      transform: scale(0);
      -webkit-transform: scale(0);
    }
    50% {
      transform: scale(1.5);
      -webkit-transform: scale(1.5);
    }
    100% {
      transform: scale(1);
      -webkit-transform: scale(1);
    }
  }

  @-webkit-keyframes bounce-out {
    0% {
      -webkit-transform: scale(1);
    }
    50% {
      -webkit-transform: scale(1.5);
    }
    100% {
      -webkit-transform: scale(0);
    }
  }

JavaScript

new Vue({
  el: '#anim',
    data: { show: true,text:"YES" },
    methods:{
        update: function(){
            this.text = 'Look at me!';
            this.show = !this.show;
        }
    }
})