search

vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
47.03k stars 8.24k forks source link

Nested elements in kept alive component are replaced before the transition #3950

Open posva opened 3 years ago

posva commented 3 years ago

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

edison1105 commented 3 years ago

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.