Vue transition 折叠类动画自动获取隐藏层高度以及手风琴效果实现

前面要说的话

前段时间，在解决左侧导航栏激活问题时，发现折叠动画过渡不是很平滑，并且还伴随着一些bug。使用起来不是很流畅，于是在解决完激活bug后，我决定把动画效果也解决掉。

---

先来看看要解决的问题，如下图：

不知细心的你有没有发现什么问题？
当点击折叠展开menu-one栏目的时候没有什么问题，但点击折叠展开mene-two栏目，当动画定格在menu-two-2选项的时候，menu-two-3及以下的部分直接立即完成了过渡。为什么会这样？下面说原因。

上图实现代码：

  <!-- html部分 -->
  <transition name="sub-menu">
    <ul
      class="site-menu-sub"
      v-show="item.children && isOpen === aindex">
      <li
        v-for="(child, index) in item.children"
        :key="index"
        class="site-menu-item">
        <router-link
          class="animsition-link"
          :to="`/${child.href}`">
        </router-link>
      </li>
    </ul>
  </transition>

  <!-- css部分 -->
  .site-menu-sub {
   
    padding: 0px;
  }
  .sub-menu-enter-active,
  .sub-menu-leave-active {
   
    transition: all .3s ease;
    height: 70px; /* 这里70px为menu-one子菜单的高度 */
  }
  .sub-menu-enter,
  .sub-menu-leave-to
  {
   
    opacity: 0;
    height: