<div v-if="show" :transition="expand">hello</div>
然后为 .expand-transition, .expand-enter 和 .expand-leave 添加 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
}
你可以在同一元素上通过动态绑定实现不同的过渡：
<div v-if="show" :transition="transitionName">hello</div>
new Vue({
el: '...',
data: {
show: false,
transitionName: 'fade'
}
})
要让div顶端对其，那么就必须根据HTML的布局和css样式的对其方式决定了：1.浮动(float),这种情况下默认横向是left,纵向是top方向，所以默认就满足顶端对其；
2.定位(position),这种情况下只要设置要top的值就可以了；
3.display：inline-block；这种情况下，一般不是顶端对其，必须在父级加上一条样式：vertical-align: top才能实现顶端对其。
Ps：这些都是基于整个div的情况下，而实际表现出来的效果。可能会受到margin、padding等样式的影响，所以最好是能够将这些因素根据自己的需求考虑进去
