У меня есть список элементов с оценками, упорядоченный по количеству баллов, отображаемый в файле response.js как вертикально-ориентированный список прямоугольных элементов (самые высокие оценки сверху). Пауки и другие клики по отдельным элементам могут отображать/скрывать дополнительную информацию, изменяя их вертикальную высоту.
Появляется новая информация, которая немного меняет оценки, делая некоторые предметы выше, а другие - после повторного сортировки. Я хотел бы, чтобы элементы одновременно отображались на их новых позициях, а не появлялись в их новых местах мгновенно.
Есть ли рекомендуемый способ сделать это в React.js, возможно, с популярным надстройкой?
(В аналогичной прошлой ситуации, использующей D3, метод, который я использовал, был примерно таким:
- Отобразить список с узлами узла DOM в натуральном порядке с относительным позиционированием. При относительном позиционировании другие небольшие изменения - CSS или JS-triggered - в отношении отдельных предметов меняют другие, как ожидалось.
- Мутировать все узлы DOM за один шаг, чтобы иметь фактические относительные координаты как новые абсолютные координаты - изменение DOM, которое не вызывает визуальных изменений.
- Переупорядочить узлы DOM элемента в пределах их родительского элемента в новый порядок сортировки - другое изменение DOM, которое не вызывает визуальных изменений.
- Анимируйте верхние значения всех узлов в своих новых вычисленных значениях на основе высот всех предыдущих элементов в новом порядке. Это единственный визуально активный шаг.
- Мутировать все узлы DOM объекта обратно в относительное позиционирование без смещения. Опять же, это не приводит к визуальному изменению, но теперь относительно позиционированные узлы DOM в естественном порядке основного списка будут обрабатывать изменения внутреннего наведения/расширения/etc при правильном переносе.
Теперь я надеюсь на аналогичный эффект в режиме React-ish...)
