Allow nested transition to trigger upon removal

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]

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

[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.