Subscribe on changes!

component with `v-if="false"` breaks transition `mode="out-in"`

avatar
Nov 11th 2021

Version

3.2.21

Reproduction link

codesandbox.io

Playground without router

A more realistic example with a toggle for the component visibility

Steps to reproduce

  1. Click toggle multiple times

What is expected?

The comp1 should be visible when toggling back

What is actually happening?

Nothing is displayed after toggling once

avatar
Nov 12th 2021

also when component have no template and render function

avatar
Nov 12th 2021

as a workaround add a key to transition:

<transition :key="key" name="fade" mode="out-in">
          <component :is="Component" :key="key" />
      </transition>
avatar
Nov 12th 2021

the root cause is: instance.update is not run. 1636725947(1)

avatar
Nov 25th 2021

This is probably related: When using mode="in-out" instead in the reproduction and navigating from next2 to next, the content of next2 does not disappear.