动画菜单组件的问题答案

【问题标题】：Trouble animating Menu component动画菜单组件的问题
【发布时间】：2019-08-05 10:19:24
【问题描述】：

我在为菜单组件设置动画时遇到问题，该组件预计会在单击时滑入和滑出，而背景会淡入和淡出。我有进出类，取决于“showMenu”布尔值。在沙箱中，当我单击 Vue 徽标时，菜单会立即进出，但在我的本地版本中，当它们滑入/淡入时一切正常，但菜单关闭时没有任何反应。我正在为此使用 Bootstrap 模式。

https://codesandbox.io/s/nk2xnz2wp0

【问题讨论】：

试试vue transitions
我试过用vue转场来做，具体来说： 1.我试图把组件包裹在App里面，但是我不能淡化背景。 2.我尝试在菜单中使用vue过渡，但仍然没有按预期工作。
我没有看到 Vue 的 <transition /> 的任何痕迹。你呢？

标签： vue.js css-transitions vue-component

【解决方案1】：

正如另一位用户所说，vue transitions 就是为此而设计的。您的代码似乎过于复杂，我建议不要将函数作为属性传递。 Vue 有关于子组件和父组件之间通信的非常好的文档，我认为这可能是您的问题的根源。我已经修改了您的代码以包含一个非常基本的 vue 过渡，并且菜单现在淡入淡出，请参阅 https://codesandbox.io/s/0m13wz25pl?fontsize=14。

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

<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>

【讨论】：

就像我上面提到的，我已经尝试过了，但是我不能在后台淡出，这就是我尝试在菜单组件中切换类的原因。

【解决方案2】：

在 App 内部，我为背景制作了一个单独的 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>

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

【讨论】：

为什么脏？如果您正在应用不同的过渡行为，那么将菜单和背景元素放在不同的过渡标签中是非常有意义的。上面的代码可读性很强，并且很好地利用了内置功能。
嗯，bg 属于 Menu，而不是 App。这对可重用性不利。这很可能是多个组件中使用的模态。