Issues Regarding TransitionGroup about core HOT 4 CLOSED

workground

from core.

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!

from core.

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.

from core.

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

from core.