Issues Regarding TransitionGroup

[bambooGHT]

Vue version

3.4.21

Link to minimal reproduction

https://play.vuejs.org/#eNqNVFFr2zAQ/iuHYTSFxHGadg9eWtaNMraHbWx96MBQHPviqJElIcmJs5D/vpPkJG4pZS+27+7T3fd9kryLbpWK1w1GaTQzhWbKgkHbqJtMsFpJbWEHGhewh4WWNZwR9CwTmSikMBY4o8e1Awxutc63sQMNdhxFZZfpNNkPB49DJkpsz69vwvv8g1s+G4dhNIYCi7XiuUWKAGYlW0PBc2Ous8gNGM1lO8kiX6Tyvc6FYZZJ8UXLRoHIa+yQWQQ2ryiQ/Ih/0dCih61HC6kpHKiOHsiFV0O1dIVbKqleCwC3DnY7ULDfn7Izo3IKPhacFauORGwURTjwfYeTc2rzQHIJeGI0JkoHPeMXgoIJHWI27nlDobFb7j7jozGwc/gNK8lwmCYaazIYYImsWtp+Zp4Xq4oGiHJUSC51CrqaDy4m74dweLi9AZBr1AsuN6M2hSUrSxTP09sU8sZKSpITTpdnoPKyZKJKIYEr1YaJUpeo04lqwUjOSjonpS8UjTaOgJJMWNShUxws7qmZJMk7j19IYUeG/cUULpKueadhzknWCbTpZM8lD6PqXFdMpHBJJJIw6OBeTYqGhwAdkVFeWNZLcszX2CUDM3vcKzKBc0jiK/O8a2jkL4tfIVVeMEueueldAzp7dRo+3db+GUxJlTO/1yfMtvK/uzwMrpJ3rzbpC1DySH9Om9JYDCvohPqjFQ0ja+hyL1gVPxkp6L/g12VRIWvFOOofyq03WZSGjq5GVsjNN5+zunEGhnyxxGL1Sv7JtC6XRT81GtRrzKJjzdKOId1DV777/R1b+j4Wa1k2nNBvFH+h10UcA+wTnXii3cN5tl/9341O7L25ay3SrnaiHFGH3Ht8FtEf7/Mb0k90p/GlX0d+kouPdF1cTzKQCvHFJNr/A7Um0IE=

Steps to reproduce

When there's a scrollbar and it's not at the top, clicking 'x' to delete an element doesn't only transition out with translateX(50%); it also transitions down.

What is expected?

It should transition solely with translateX(50%).

What is actually happening?

When the element is not at the top of the scroll bar, the transition when deleting the element is as if translateY(y); is also added.

System Info

No response

Any additional comments?

No response

[yangxiuxiu1115]

workground

[teddygunawan]

Hello!

It seems to be the expected behavior of your codes, this part of the code
.list-leave-active { position: absolute; }

Causes the element to be positioned absolutely during transition, which means the element won't follow the usual flow of the document anymore. In this case, because u didn't specify its ancestor, it will have different behavior when it is scrolled vs when it isn't as it will be absolutely positioned against the viewport, you see this by manually adding absolute position to each test element. Here is ChatGpt explanation of it.

You can fix this either by

1. Removing absolute positioning (.list-leave-active) in the transition. However this will cause the top and bottom element to snap at the end of transition instead of smoothly moving to position.
2. By adding position: relative to .list-box1 class, however, it is still not a perfect solution as it will cause the .test element to move downward a little bit due to the fact that the scrolling container resizes. This container resizing is why upper element is not affected but bottom element is affected by this. If you don't like this, the only way left is to change the transition animation.

Hope this helps!

[bambooGHT]

Hello!

It seems to be the expected behavior of your codes, this part of the code .list-leave-active { position: absolute; }

Causes the element to be positioned absolutely during transition, which means the element won't follow the usual flow of the document anymore. In this case, because u didn't specify its ancestor, it will have different behavior when it is scrolled vs when it isn't as it will be absolutely positioned against the viewport, you see this by manually adding absolute position to each test element. Here is ChatGpt explanation of it.

You can fix this either by

1. Removing absolute positioning (.list-leave-active) in the transition. However this will cause the top and bottom element to snap at the end of transition instead of smoothly moving to position.
2. By adding position: relative to .list-box1 class, however, it is still not a perfect solution as it will cause the .test element to move downward a little bit due to the fact that the scrolling container resizes. This container resizing is why upper element is not affected but bottom element is affected by this. If you don't like this, the only way left is to change the transition animation.

Hope this helps!

Thank you!
I really hope there is a perfect solution, but it seems impossible to achieve it at the moment, so I can only give up.

[yyx990803]

You need to make your items position relative to the container, i.e. add position: relative to .list-box1: demo