Блог

итак, я пытаюсь создать программу, которая сортирует массив визуальным способом, используя react js. На данный момент у меня работает сортировка, и на веб-сайте будет отображаться правильно отсортированный массив, но я хотел добавить анимацию сортировки по мере ее сортировки. Я пытался отображать каждый раз, когда происходит новый обмен, но рендеринг просто заменяет то, что находится на экране, вместо того, чтобы меняться по мере перемещения элементов массива алгоритмом. Любая помощь была бы отличной.

Я создал песочницу с соответствующим кодом здесь

В вашем случае это должно быть так же просто, как добавление css-перехода:

 .nums{
  transition: 1s height;
}
  

Это добавит 1s переход к height свойству (используйте all , и оно будет анимировать все), проверьте это для получения дополнительной информации:
https://www.w3schools.com/css/css3_transitions.asp

И если вы хотите немного больше реагировать, проверьте это react-animations — он использует все анимации из animate.css : https://github.com/FormidableLabs/react-animations

Обновление для изменения порядка: для изменения порядка самое простое, что вы можете сделать, это:

 .nums{
  transition: 1s margin;
  position: absolute;
}
  

теперь используйте margin-left , чтобы расположить каждый элемент там, где вы хотите, так что в основном с помощью приведенного выше просто добавьте:

marginLeft: `${num*90}px для вашего:

 <div
  className="nums"
  style={{ height: `${num * 7   90}px`, width: `${width}px`, marginLeft: `${num*90}px` }}
>
  

и это должно быть так.