2

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?

jabsatz
  • 341
  • 3
  • 10
  • Your two transition confused me first. But I see now just one is count now. I tried a lot of things without success. All I achieved with useRef that the first node remains there in the animation. And I do not understand it either. https://codesandbox.io/s/focused-goldberg-6q9zi, Please post a solution if you get there. – Peter Ambruzs Jun 15 '19 at 07:20

1 Answers1

1

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

Peter Ambruzs
  • 7,763
  • 3
  • 30
  • 36