CODEWITHSUNDEEP
reactjsreact-spring
jabsatz
jabsatz

Reputation: 341

React-Spring useTransition shuffles my list items around

I have a list of labels that I render with a React-Spring Transition. The idea is that you can add items and if you have more than 5, a "Show more" button will appear. Pressing this button toggles wether you're showing all of the labels or just the first five.

The problem is when I pass from "Showing more" to "Showing less". I noticed that before my items were hidden, all of them but the first moved to the beggining of the list, generating a weird effect where you can see the first labels change their text and disappear, before leaving the last ones (with the first labels' text).

I've attached a small sandbox that reproduces this problem. It has 10 items and you can open and close it, but it reproduces this weird bug: https://codesandbox.io/s/thirsty-mountain-ut3r9

Any tips on how to solve it?

Upvotes: 2

Views: 3438

Answers (1)

Peter Ambruzs
Peter Ambruzs

Reputation: 8213

Finally I have it. If you upgrade react-spring version to 9 beta and remove the reset from the transition it works as expected.

https://codesandbox.io/s/adoring-tu-yypii

Upvotes: 1

Related Questions