Vue中添加過渡效果

最近在學習Vue這個框架，發現新的版本中，官網的文檔里面說的過渡效果，如果直接粘貼官方的例子中的代碼，發現並沒有過渡的效果，經過反復測試之后終於知道怎么搞了，把測試的過程總結一下，以便以后回顧。

貼上成功的代碼：

html:
<div v-if="show" :transition="expand">hello</div>
或者
<div v-if="show" v-bind:transition="expand">hello</div>

css:
/* 必需 */
.expand-transition {
  transition: all .3s ease;
  height: 30px;
  padding: 10px;
  background-color: #eee;
  overflow: hidden;
}

/* .expand-enter 定義進入的開始狀態 */
/* .expand-leave 定義離開的結束狀態 */
.expand-enter, .expand-leave {
  height: 0;
  padding: 0 10px;
  opacity: 0;
}

js:
new Vue({
  el: '#app',
  data: {
    show: false,
    transitionName: 'expand'
  }
})

點擊查看效果