Nested transition behavior inconsistent at mount/unmount

[y-nk]

Version

2.6.10

Reproduction link

https://jsfiddle.net/ae82rfnv/

Steps to reproduce

While operating, carefully notice of the transitions

Working flow

1. tick first box (parent transition plays)
2. tick second box (child transition plays)
3. untick second box (child transition plays)
4. untick first box (parent transition plays)

Broken flow n°1

1. tick first box (parent transition plays)
2. tick second box (child transition plays)
3. untick first box (only parent transition plays)

Broken flow n°2

1. tick second box (nothing happens)
2. tick first box (the 2 transitions play in sync)
3. untick first box (only parent transition plays)

What is expected?

While unmounting, a transition should search for nested transition and operates in sequence carefully, running children transition first, then playing its own transition before unmounting, so all children transition could run their "leave" transition carefully.

What is actually happening?

Only the parent transiton runs, ignoring the children transition.

---

I understand why it does what it does as is, and it makes sense from mounting point of view ; where the logic fails is in the "final effect" : while the 2 transitions (parent and child) play correctly when mounting, it doesn't run "the opposite way/backwards" when unmounting.

[posva]

Duplicate of #9328

The flow n1 is working correctly because you used appear and that's expected

[y-nk]

@posva sorry for the duplicate. As said i understand why it works as is, still it's not the intented behavior from a consumer side. From the original ticket, sad to see it's still not an implemented feature.

[posva]

no worries, I added your repro link to the other issue because it's very clean!

to be clear, the appear one is really working as expected from a consumer side and is customizable by using or not the appear prop, the other one is working as expected too but isn't easily customizable: it's not possible to trigger nested transitions on parent removal automatically

[y-nk]

@posva thanks for the feedback. I was trying to hack into <transition> lifecycle's methods to chain transitions but it seems like the rendering process is frozen while transitioning? Is that a bug or something normal (=should i fill a ticket)?

Updated try : https://jsfiddle.net/cztsvao8/
Explanation : parent transition has been switched from css to :css="false" with all hooks wired to functions copying the css mechanism (according to doc, at least)

My idea was to use a guard function which will hold the parent's leave done callback, and put if as a part of the child transition v-if (so when set, it unmounts), and also as the child's after-leave callback so the parent transition would resume when the child transition is finished.

Thanks for your time!

[posva]

no, that's something normal. You need to update the component before triggering the leave transition. I think there is an open issue about being able to change some of the stuff in beforeLeave

[y-nk]

As for the people interested, I found success in this particular demo by adding a little more css.

Here's an updated working demo : https://jsfiddle.net/y_nk/0ychqaen/

Please notice that will only fix the display, not the hooks.