Nested elements in kept alive component are replaced before the transition

[posva]

Version

3.1.1

Reproduction link

Playground

Steps to reproduce

1. Click on toggle multiple times

What is expected?

It should transition from Foo Foo to Bar Bar and vice versa

What is actually happening?

It transitions from Foo Bar to Bar Bar and then Bar Foo Foo Foo

---

• Simplified from The behavior of nested routes inside <transition> and keep-alive is different from vue2 router#983
• Removing KeepAlive fixes the problem
• This behavior is different from Vue 2

[edison1105]

I've re-thought the question. Maybe my PR is not correct.

There are two effects in the queue

1. update of Transition
2. update of Foo.vue
   After the queue is flushed, the animation takes effect.

So skipping the update of Foo.vue is not correct.
Maybe should delay updating Foo.vue after Transition has done.

Edit:
delay updating Foo.vue seems not updated the DOM.
I have started to believe this is not a bug.😓

Foo.vue will unmount without KeepAlive, so it will not update and the animation looks normally.