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

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;
}

修改的小提琴链接