Description
Vue version
3.5.2
Link to minimal reproduction
Steps to reproduce
In the example is a nested transition group. This is typical for Trello-like applications. Custom classes (e.g. tailwind) are put on both the outer and the inner group. Most importantly: the move-class is something like transition-all.
What is expected?
When triggering a transition of the outer class, the elements of the inner class should remain undisturbed and move as a single block.
What is actually happening?
The moveClass of the inner TransitionGroup is applied as well. A transition-all class is placed on the elements of the inner group, which causes the elements being moved to slide all over the place.
In the given minimal example, this is made extra clear by applying colors to the moveClass.
System Info
No response
Any additional comments?
Working on a plugin for hovering lists in vue, I ran into this while trying to bring it to the maturity level of using nested lists (trello style): https://github.com/vuereka/vue-arrange
I did not test if other styles, classes and hooks have the same issue. I hope that by looking at the vue code an idea of the scope of the bug will arise such that sensible tests can be designed/executed.