Edit in JSFiddle

var app = new Vue({
  el: "#app",
  data: {
    show: true
  },
  methods: {
    toggleShow: function(e) {
      this.show = !this.show;
    }
  }
});
.msg {
  transition: all .3s ease;
  height: 30px;
  padding: 10px;
  background-color: #f5f5f5;
  overflow: hidden;
}

.msg.v-enter,
.msg.v-leave {
  height: 0;
  padding: 0 10px;
  opacity: 0;
}
<html>

  <head>
    <title>Vue App</title>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.10.6/vue.js"></script>
    <script src="main.js"></script>
    <link rel="stylesheet" href="main.css">
  </head>

  <body>
    <div id="app">
      <button v-on="click: toggleShow">Toggle</button>
      <p class="msg" v-if="show" v-transition>Hello Vue!</p>
    </div>
  </body>

</html>