inconsistent behaviour on nested transition groups

[sibbng]

Version

3.0.0-beta.18

Reproduction link

https://github.com/sibbngheid/vue-transition-group

Codepen:
Vue 2 version: https://codepen.io/sibbngheid/pen/ZEQxQQM?editors=1000
Vue 3 version: https://codepen.io/sibbngheid/pen/VweXeaL?editors=1000

Steps to reproduce

Bug 1:

1. Open Vue 3 example, click Reverse Outer button.
   Titles transitioning in correct positions. But nested transition group (team names with red and green) will be instantly teleport to sides then start transitioning. In Vue 2 example nested transition groups is animating right.

Bug 2: This is Vue 2 bug. Maybe should be discussed on Vue 2 repo.

1. Open Vue 2 example, click Reverse Inner button. Then click right after to Reverse Outer button.
   In this case, the nested transition group (team names with red and green) at the left one will lose its transition animation. In Vue 3 example this issue is not happening.

What is expected?

Described.

What is actually happening?

Described.

---

I move my flex flex-row classes from div.matches to nested transition group on Vue 2 example. Because it is wrapping.

[LinusBorg]

@sibbng this issue is quite old and was reported for a beta version. does the issue still exist for you in stable 3.0.5 ?

[sibbng]

@sibbng this issue is quite old and was reported for a beta version. does the issue still exist for you in stable 3.0.5 ?

Yes.

[LinusBorg]

Thanks!

[LinusBorg]

Sidenote: The Vue 2 bug should indeed be reported in the Vue 2 repo.

[HcySunYang]

This only happens when using TransitionGroup nested, the inner TransitionGroup applies transition to the child nodes, and the outer TransitionGroup applies transition to the parent node. These two transition effects are superimposed:

I don't have a good idea, just add a hint here