时间戳

首页 > 解决方案 > 我的 Twig 文件中的 Vue 模态组件的转换不起作用

vuejs2 - 我的 Twig 文件中的 Vue 模态组件的转换不起作用

问题描述

在我的组件 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>

和风格：

<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 绑定的header twig template中<div id="menu">，我放置了我的组件：

<div id="menu">

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

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

</div>

我的叠加层没有淡入。过渡不起作用，我该如何解决？

标签： vuejs2css-transitions

解决方案

添加appear到您的过渡元素以在初始渲染时触发它。

<transition appear name="overlay-fade">

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

推荐阅读