Vuejs2 Twig文件中我的Vue模式组件的转换不起作用

在my component Modal.vue中，我有我的模板：

<template>
    <transition name="overlay-fade">
      <div class="fixed inset-0 w-full h-screen flex items-center justify-center bg-green-400 z-40 opacity-50">
        <div class="p-8 bg-white w-full max-w-2xl flex-col flex">
          <slot>Modal content</slot>
        </div>
      </div>
    </transition>
</template>

---

我的覆盖层没有褪色。转换不起作用，如何修复此问题？

将

添加到转换元素中，以在初始渲染时触发它

<transition appear name="overlay-fade">



我添加了一个工作示例。这可能是因为模态在可见之前就被渲染了。是否可以上载父组件代码？请尝试将
v-if=“isOpen”
添加到菜单模式标记最后一个问题，以便理解。如果我在我的组件
Modal.vue
中添加
v-If=“isOpen”
到
部分，则它不起作用。如果我将它添加到
（在我注册Modal.vue组件的模板中），那么它就工作了。为什么会这样？只是为了了解它是如何工作的。因为组件无法看到其父级的属性，除非您将它们作为道具传递。因此，您可以执行
操作，然后将isOpen注册为组件中的道具
道具：['isOpen']
，然后您可以在组件模板中使用它（但不能在模板标记本身上）。
<div id="menu">

 <hamburger-button @click="isOpen = !isOpen"></hamburger-button>

  <menu-modal :class="isOpen ? 'block' : 'hidden'">
    {{ page.navigation }}
  </menu-modal>

</div>

<transition appear name="overlay-fade">