Vue.js 设置菜单组件动画时出现问题

我在设置菜单组件的动画时遇到问题，当背景淡入淡出时，菜单组件在单击时会滑入和滑出。我有输入和输出类，这取决于“showMenu”布尔值。在沙盒中，当我单击Vue徽标时，菜单会立即飞入飞出，但在我的本地版本中，当它们滑入/淡入时，一切都会工作，但当菜单关闭时，什么也不会发生。我正在为此使用引导模式

正如另一位用户所说，我们是为此而设计的。您的代码似乎过于复杂，我建议不要将函数作为属性传递。Vue有关于子组件和父组件之间通信的非常好的文档，我认为这可能是您的问题产生的原因。我已经修改了您的代码，使其包含一个非常基本的vue转换，菜单现在淡入淡出，请参见

对于未来可能的读者，涉及的主要代码是：

<template>
  <transition name="fade">
    <HelloWorld v-on:click="showMenu = !showMenu;" v-if="showMenu" />
  </transition>
</tempalte>

<style>
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 2s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
     opacity: 0;
  }
</style>

---

在应用程序内部，我为背景制作了一个单独的div，并对菜单和背景div进行了单独的Vue转换，如下所示：

  <transition name="slide-menu" mode="in-out">
    <MenuDrawer v-if="showMenu" :toggleMenu="toggleMenu" />
  </transition>

  <transition name="fade" mode="in-out">
    <div class="darkBg" v-if="showMenu"></div>
  </transition>

---

它确实感觉很脏，我希望有人能给我一个更好的解决方案。

试着用vue转换来实现它，特别是：1。我试图将组件包装在应用程序中，但我无法使背景褪色。2.我尝试在菜单中使用vue transition，但仍然无法按预期工作。我没有看到任何vue的痕迹。是吗？就像我上面提到的，我已经尝试过了，但是我不能在背景中淡出，这就是为什么我尝试在菜单组件中切换类。为什么？如果要应用不同的过渡行为，则将菜单和背景元素放置在不同的过渡标记中非常有意义。上面的代码可读性很强，并且很好地利用了内置功能。这不利于可重用性。这很可能是多个组件中使用的模式。