TransitionGroup bleeds trigger of custom classes (and possibly other things?) to nested TransitionGroups

[femans]

Vue version

3.5.2

Link to minimal reproduction

Vue SFC Playground example

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.

[edison1105]

duplicate of #5385

a workaround

.columnsTransition .itemTransition{
  transition: unset;
}

see Playground

[YiMo1]

@edison1105
抱歉，按照你的解决方案试了下，结果在动画结束时，.itemTransition 类依旧存在于子元素。这是否属于另外一个Bug？

[femans]

Thanks @edison1105 for the workaround. Note that this is not a solution when using tailwind, or when the applied classes are not known in advance.
I have a hackish workaround now for my own plugin, but I don't love it. Hope this gets fixed; maybe I will take a look myself at some point and make a PR when I have some extra time, I already found the responsible code.

[edison1105]

This one will be fixed by #8803
see Playground with #8803