详解Vue中添加过渡效果

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

/* 必需 */
.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;
}

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