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

修改的小提琴链接