javascript - vue 如何实现组件与组件之间的transition过渡?-PHP中文网问答

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

需求：

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

说明：

nav组件内部的DOM变化使得整个页面高度发生了变化，从而使nav下面的组件的offsetTop的变化都在瞬间，显得很突兀
Vue文档中说明了触发transition需要v-if,v-for,或者DOM跟新。在这里是通过组件内部DOM的变化来触发组件与组件之间的过渡，感觉也应该是可以的啊，但是我没实现成功，是我理解的有问题吗？

Vue.component('navigation', {
    template: '\
      \
      \
          导航第一行\
        \
      \
      \
          \
        导航第二行\
        \
      \
    \
  ',
  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