Vue: Allow nested transition to trigger upon removal

[mw76]

Version

2.5.22

Reproduction link

https://jsfiddle.net/wx91uLft/
other: https://jsfiddle.net/ae82rfnv/

Steps to reproduce

• Show/hide elements with the "Toggle" button.
• Show/hide elements with the "Toggle Ticked" button. Shows a workaround.

What is expected?

All transitions should be triggered on leave, even for nested child elements.

What is actually happening?

Transition classes don't get applied to nested child elements, when conditions for leaving transitions occur on the same tick.

Workaround: Delaying the parent transitions by one tick fixes the problem.

---

This has been reported, but got closed due to the sample code did not use appear on the <transition> elements. (See issues #7643 and #9243)

My example is more detailed and also provides a workaround.

[posva]

This is working as expected because when both conditions are set to false on the same tick, only the parent is removed by the v-if, nothing inside is evaluated. That's why the inner transition doesn't trigger, it wasn't removed directly

[mw76]

Wow, that's disappointing. 😢
So if we want to have working nested transitions in Vue, this should be considered a feature request?

[posva]

it could be via a new prop on transition I think 🤔 . I haven't checked the feasibility though although it should be possible

[mw76]

Nice! 😊👍

[damtsnkff]

For future reader, @posva is right, we can achieve that via props.

I made a quick example here for the matter.
I used @before-leave="" to trigger the parent transition (change of state), and @before-enter="" on the parent, to trigger the animation on the child element.