vue 如何实现组件与组件之间的transition过渡?

Question

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

需求：

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

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

说明：

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

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

<div id="app">
  <transition-group name="slide">
    <navigation key="nav" class="nav"></navigation>
    <panel key="panel" class="panel"></panel> 
  </transition-group></div>

demo