Out transition not working when nesting component w/ render function

[jpdombrowski]

Version

2.5.17

Reproduction link

https://jsfiddle.net/eywraw8t/265765/

Steps to reproduce

Push button, wait for fade in. Push button again.

What is expected?

Elements fade in on first click and fade out on second click.

What is actually happening?

Transitioning in works fine.
On transitioning out transition classes are applied if rendering of transitions's child node is controlled by a v-if directive, but fail to be applied when rendering is controlled by child components render() function.

---

I don't know if this is expected behaviour or if I'm overlooking something obvious, but it feels like both cases should behave identical, since the documentation explicitly states v-if is implemented via JS if-statements within render functions.

[posva]

See #3431 (comment)

[jpdombrowski]

Thanks for pointing that out! Couldn't find it.

Here is an updated fiddle showcasing both use cases: https://jsfiddle.net/eywraw8t/265969/

This was really quite the gotcha though :).
And it feels a little bit unfortunate when transitions are supposed to be optional in your use case and you're after highly decomposed components.

[posva]

you can also put the transition inside of the component and wrap your root element with it only if a prop transition is provided 🙂