Question

我遇到一种情况，需要禁用<transition>组件中子div上的淡入淡出过渡。之所以必须嵌套它，是因为未嵌套时布局会闪烁（如果需要，也可以为此提供小提琴）。

如果您看到下面的小提琴，我想做的是当您将鼠标悬停在红色上时，非动态文本会立即从蓝色消失，反之亦然，但是，当前，它会过渡而不仅仅是消失。我也尝试过使用v-if和v-show，它们当然仍会触发淡入淡出过渡。

在整个示例中检查小提琴，下面的示例对我需要的内容给出了大致的认识

<template>
  <transition name="fade" mode="in-out">
    <div :key="dynamicTitle">
      <h1>{{ dynamicTitle }}</h1>
      <div v-if="dynamicTitle != 'title'">
        <p>static content which should immediately disapear, but doesn't</p>
      </div>
    </div>
  </transition>
</template

Answer 1

您可以通过修改CSS来实现

.fade-enter-active, .fade-leave-active {
  transition: opacity .0s;
}

修饰的小提琴link

Vue.js-在子Div上禁用过渡

1 个答案: