Vue: Different nested transitions not working as expected, only root transition gets applied

[uikid]

Version

2.5.13

Reproduction link

https://jsfiddle.net/4kf9egr3/

Steps to reproduce

Create a transition inside a transition with different effects.

What is expected?

Two different effects should be shown.

What is actually happening?

Only the effect of the root transition is shown.

[posva]

You need to add appear to the nested one as it's just appearing so it doesn't apply the transition the first time is rendered 🙂

[uikid]

@posva thanks, but this is not working when used inside a single file component, same code.

Any ideas why?

[LinusBorg]

That should work just as well. Create a reprodiuction and open an issue if you can reproduce it.

[anuoua]

@posva @LinusBorg Hi, i tried, and i found that leave transition is missing, just enter transition work with appear attribute, help please.

[LinusBorg]

Again, we need a reproduction to understand what the problem is. we can't help you if you can't provide that.

[allanplima]

@LinusBorg I think that this is the reproduction link
-> https://jsfiddle.net/4kf9egr3/

There you can see the behavior. I think that, when we write nested transitions, the transition should be applied to the nested component too.

The problem is that you can make an outer transition occur, but a nested transition just uses the parent transition if the state of the component is controlled by a variable in the parent component. Personally I just need to know if this is the intended behavior

If you put the appear attribute into the nested transition, then it works

[posva]

yes, that is intended, you need to use the appear prop. It's pretty much the same as the original issue 😅