У меня есть ситуация, когда мне нужно иметь возможность отключить переход постепенного изменения для дочернего элемента div в компоненте <transition>. Причина, по которой он должен быть вложенным, заключается в мерцании макета, когда он не является вложенным (может также обеспечить скрипку для этого при необходимости).
Если вы видите приведенную ниже скрипку, то, что я хочу сделать, это когда вы наводите курсор на красный цвет, нединамический текст сразу исчезает с синего, и наоборот, однако, в настоящее время он скорее исчезает, чем просто исчезает. Я также пробовал с v-if и v-show, которые, конечно, все еще вызывают переход замирания.
Fiddle
Проверьте скрипку для всего примера, пример ниже дает общее представление о том, что мне нужно
<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