I am dealing with a scenario where I want to remove the fade transition on a child div within a <transition> component. The reason for nesting it is to prevent layout flickering, which can be demonstrated in a fiddle if necessary.
In the fiddle below, my goal is to make the non-dynamic text disappear from blue immediately when red is hovered over, and vice versa. Currently, there is a transition instead of an instant disappearance. I have also tried using v-if and v-show, but they still trigger the fade effect.
Please refer to the fiddle for the complete example. The snippet provided above gives a basic understanding of what I require.
<template>
<transition name="fade" mode="in-out">
<div :key="dynamicTitle">
<h1>{{ dynamicTitle }}</h1>
<div v-if="dynamicTitle != 'title'">
<p>static content which should immediately disappear, but doesn't</p>
</div>
</div>
</transition>
</template