最初に

下記の公式ページを基にしていますので、そちらを参考にするのが最も良いです。
デモもあるので先に確認した方がイメージが掴みやすいです。

Adding Transition Effects
http://vuejs.org/guide/transitions.html

サンプルコード

公式ページの方のサンプルコードが断片的だったので、動作確認を兼ねてフルな形で書いてみました。

index.html

<!DOCTYPE html>
<head>
  <title>Vue Transition</title>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.10.6/vue.js"></script>
  <script src="app.js" defer="defer"></script>
  <link rel="stylesheet" href="app.css">
</head>
<body>
  <div id="v-app">
    <h1>Vue Transition</h1>
    <p class="msg" v-if="show" v-transition>Hello!</p>
    <button v-on="click: toggleShow">Toggle</button>
  </div>
</body>
</html>

app.js

var app = new Vue({
  el: "#v-app",
  data: {
    show: true
  },
  methods: {
    toggleShow: function(e) {
      this.show = !this.show;
    }
  }
});

app.css

.msg {
    transition: all .3s ease;
    height: 30px;
    padding: 10px;
    background-color: #eee;
    overflow: hidden;
}
.msg.v-enter, .msg.v-leave {
    height: 0;
    padding: 0 10px;
    opacity: 0;
}

解説

メッセージの表示を切り替えるためのshowは、buttonにtoggleShowメソッドを紐付けることで、ON/OFFを切り替えています。
メッセージのpタグにv-transitionディレクティブを指定することで、v-ifに合わせてトランジション開始時にv-enter、終了時にv-leaveが付与されるので、それに合わせてCSSでtransitionを指定しています。(enter/leaveの名称はVue.config()で変更できます。)

Vue.jsでTransitionする

最初に

サンプルコード

解説