Переход моего Vue модального компонента в мой файл Twig не работает

Question

В моем компоненте Модал. 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>

И стили:

<style>
  .overlay-fade-enter-active,
  .overlay-fade-leave-active {
    transition: all 0.8s;
  }
  .overlay-fade-enter,
  .overlay-fade-leave-active {
    opacity: 0;
  }
</style>

В шаблоне ветки заголовка header.html.twig, где Vue привязан через <div id="menu">, я разместил свои компоненты:

<div id="menu">

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

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

</div>

Мое наложение не исчезает. Переход не работает, как мне это исправить?

Answer 1

Добавьте appear к элементу перехода, чтобы активировать его при начальном рендеринге.

<transition appear name="overlay-fade">

https://jsfiddle.net/ellisdod/magcnkro/