Question

我在设置菜单组件动画时遇到麻烦，希望该组件在单击时会滑入和滑出，而背景会逐渐淡入和淡出。我有进出类，具体取决于“ showMenu”布尔值。在沙盒中，当我单击Vue徽标时，菜单会立即跳入和跳出，但是在我的本地版本中，当它们滑入/淡入时，一切正常，但是在菜单关闭时，什么也没有发生。我正在为此使用Bootstrap模式。

https://codesandbox.io/s/nk2xnz2wp0

Answer 1

正如另一个用户所说，https://github.com/Microsoft/monaco-editor/issues/964是为此目的而设计的。您的代码似乎过于复杂，我建议您不要将函数作为属性传递。 Vue拥有有关子组件和父组件之间的通信的非常好的文档，我认为这可能是您的问题所在。我已经修改了您的代码，使其包含非常基本的vue转换，并且菜单现在可以淡入和淡出，请参见vue transitions。

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

Function FindSubstr(CellIn)

    Dim countries() As String

    countries = Split(CellIn, ";")
    FindSubstr = ""
    NewLine = ""
    For j = 0 To UBound(countries)
        '************************************************************************************
        '* Find the String in column B
        '************************************************************************************
        Set FindStat = Range("B:B") _
                    .Find(countries(j), LookIn:=xlValues)
        NewLine = vbLf
        If FindStat Is Nothing Then
            FindSubstr = FindSubstr + NewLine + countries(j) + " False"
        Else
            FindSubstr = FindSubstr + NewLine + countries(j) + " True"
        End If

    Next j

End Function

Answer 2

在内部应用程序中，我为背景创建了一个单独的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>

肯定感觉很脏，我希望有人可以向我展示更好的解决方案。

动画菜单菜单组件

2 个答案: