React-Spring useTransition перемешивает элементы моего списка

У меня есть список меток, которые я визуализирую с помощью перехода React-Spring. Идея в том, что вы можете добавлять элементы, и если их больше 5, появится кнопка «Показать еще». Нажатие этой кнопки переключает отображение всех ярлыков или только первых пяти.

Проблема в том, что я перехожу от «Больше показываю» к «Меньше показываю». Я заметил, что до того, как мои элементы были скрыты, все они, кроме первого, перемещались в начало списка, создавая странный эффект, когда вы могли видеть, как первые метки меняют свой текст и исчезают, прежде чем оставить последние (с первыми метками текст).

Я прикрепил небольшую песочницу, которая воспроизводит эту проблему. В нем 10 элементов, и вы можете открывать и закрывать его, но он воспроизводит эту странную ошибку: https://codesandbox.io/s/thirsty-mountain-ut3r9

Есть какие-нибудь советы, как это решить?


person jabsatz    schedule 14.06.2019    source источник
comment
Сначала меня сбили с толку ваши два перехода. Но теперь я вижу, что сейчас в счет только один. Я много чего пробовал безуспешно. Все, что я добился с помощью useRef, заключается в том, что первый узел остается в анимации. И я этого тоже не понимаю. codeandbox.io/s/focused-goldberg-6q9zi, опубликуйте решение, если вы достичь цели.   -  person Peter Ambruzs    schedule 15.06.2019


Ответы (1)


Наконец-то он у меня есть. Если вы обновите версию response-spring до 9 beta и удалите сброс из перехода, он будет работать должным образом.

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

person Peter Ambruzs    schedule 15.06.2019
comment
Замечательно! Большое тебе спасибо! - person jabsatz; 15.06.2019