Question

有人可以解释一下，为什么下面的代码不起作用？

<template>
  <div class="modal">
    <transition name="slide-in">
      <div @click.stop class="modal__container">
        <div @click="close" class="modal__button">
          <span class="modal__button--close">Close</span>
        </div>
      </div>
    </transition>
    <transition name="fade-in">
      <div @click="close" class="modal__overlay"/>
    </transition>
  </div>
</template>

我正在尝试使用两个不同的动画（文本区域的slide-in和模式重叠的fade-in）创建 modal 。

如果我删除类为modal的元素，并将代码编辑为以下内容，则一切正常。

<template>
   <transition name="slide-in">
     <div @click.stop class="modal__container">
       <div @click="close" class="modal__button">
         <span class="modal__button--close">Close</span>
       </div>
     </div>
   </transition>
</template>

Answer 1

在transitions上参考Vue.js文档

当从DOM中插入，更新或删除项目时，Vue提供了多种方法来应用过渡效果

这意味着过渡要应用类的DOM节点应该是插入/更新/删除的DOM节点。

由于它是一个模式窗口，因此我假设它在父组件中应用了v-if指令来处理它的可见性。为了使过渡正常进行，它应该包装将要更新的DOM元素。

如果将模式窗口的代码移动到父组件中，则可以更轻松地理解它。只是为了更好地可视化元素树和过渡的行为。

在第一个示例中，条件渲染（v-if）适用于<div class="modal">，它没有进行过渡包装-因此不会触发动画。同时，嵌套节点被过渡包裹，但是没有什么可以更新或删除它们。它们是静态显示的，并最初在组件创建时插入。没有动画。

为了使其按预期工作，建议采用以下结构：

<template> 
  <transition name="fade-in">
    <div 
      class="modal__overlay"
      @click="close"
    >
      <transition name="slide-in">
        <div 
          v-if="containerVisible"
          class="modal__container"
          @click.stop
        >
          <div @click="close" class="modal__button">
            <span class="modal__button--close">Close</span>
          </div>
        </div>
      </transition>
    </div>
  </transition>
</template>

此解决方案期望modal__overlay具有position: fixed;样式，并将变量containerVisible设置为模式组件的true挂钩内的mounted。

div元素内的Vue过渡不起作用

1 个答案: