Vue在父级点击时触发嵌套转换

Question

我正在设置带有Vue过渡的移动菜单，并且具有嵌套的过渡/动画，该过渡/动画在初始菜单单击后显示时会运行。我不知道的是如何在菜单关闭后淡出菜单之前触发嵌套过渡运行。

我无法为此找到一个示例，或者也许还没有发现什么。可能是时候使用挂钩了吗？这是我在Vue工作的第一周，我想找到Vue的解决方法。

模板

<transition name="fade-menu">
      <div v-if="isOpen" class="mobile__menu">
        <nav>
          <ul class="menu__list">
            <li @click="toggle" v-for="item in menuItems" :key="item.name" class="mobile__item">
              <transition name="fade-item" appear>
                <nuxt-link :to="item.link" :style="item.transitionDelay" exact>{{item.name}}</nuxt-link>
              </transition>
              <span class="mobile__item--block" :style="item.animationDelay"></span>
            </li>
          </ul>
        </nav>
      </div>
</transition>

CSS

.fade-menu-enter,
.fade-menu-leave-to {
  opacity: 0;
}
.fade-menu-enter-active {
  transition: opacity 250ms;
}
.fade-menu-leave-active {
  transition: opacity 550ms;
  transition-delay: 400ms;
}
.fade-item-enter,
.fade-item-leave-to {
  opacity: 0;
}
.fade-item-enter-active,
.fade-item-leave-active {
  transition: opacity 0ms cubic-bezier(0.4, 0.25, 0.3, 1);
}
.fade-item-leave-active {
  transition-delay: 0ms;
}