两个组件：nav导航栏组件，panel内容组件

需求：

• nav组件第二层导航的显示/隐藏(过渡效果)，已实现。

• nav与panel组件的过渡效果, 未实现。

说明：

• nav组件内部的DOM变化使得整个页面高度发生了变化，从而使nav下面的组件的offsetTop的变化都在瞬间，显得很突兀

• Vue文档中说明了触发transition需要v-if,v-for,或者DOM跟新。在这里是通过组件内部DOM的变化来触发组件与组件之间的过渡，感觉也应该是可以的啊，但是我没实现成功，是我理解的有问题吗？

Vue.component('navigation', { template: '\ 
\ 
\ 导航第一行\ show\ 
\ \ 
\ 导航第二行\ 
\ \ 
\ ', data() { return { second: false, }; }, }) Vue.component('panel', { template: '
内容
', }) new Vue ({ el: '#app', })

p { text-align: center; color: #fff; } .nav .floor { background: #ec8442; height: 30px; } .nav .floor button { right:10px; position: absolute; } .panel { height: 100px; background: #42c1ec; padding-top: 20px; } .floor-2 { transition: all 0.8s } .nav-slide-enter, .nav-slide-leave-active { opacity: 0; transform: translateY(-30px); }

demo