Author avatar

Vivek Kumar

Animating a list-reordering

Vivek Kumar

  • Jun 27, 2019
  • 7 Min read
  • 722 Views
  • Jun 27, 2019
  • 7 Min read
  • 722 Views
Web Development
React

Introduction

The animation of list-reordering comes at an intermediate to advanced level of transition. Basically, it is due to the fact that when it comes to the list reordering then there are multiple levels and complexities that are attached to it. The level of layers and components added to the list decides what level of animation is executed to get things done. In this guide, you'll learn how to animate a list-reordering using various libraries.

Setting a Problem Statement

When it is about animating a list ordering in React JS, there is a significant number of animators who demand a React JS friendly approach to animate the list reordering.

To set a scenario for list-reordering, consider a list of items comprising of scores, ordered by scores, and vertically organized list in React JS. The list is comprised of rectangular components with the highest scores at the top. Hovers, as well as the other clicks, pointing on individual items, may hide or show additional info, altering the height vertically.

With the arrival of the new information, the changes take place in the scores, gradually making a few of the rank of the item at higher or lower order after the re-sort. Now all the concerned items are animated simultaneously to their respective new position, instead of appearing at new location straightaway.

The Suggestive Way to Accomplish This Using React JS

To attain seamless yet dependable list-reordering, the inclusion of add-on components can play a pivotal role.

Before starting with React JS, if we try to solve the same case in the D3 library, then it would follow the given steps:

  • Publish the list, along with the item Document Object Model nodes, in the respective natural order, comprising of relative positioning. It is through the relative positioning, as well as other minute changes, that the JS or CSS is actually triggered.
  • Transform all the Document Object Model (DOM) nodes within a single step, in order to avail real relative coordinates as the new sort absolute coordinates. Here, a Document Object Model changes that result in no kind of visual change.
  • Next, re-arrange the item Document Object Model nodes, inside the parent, to arrange a new sort order; another Document Object Model change resulting in none of the visual change.
  • Animate the top offsets of all the nodes to their respective newly measured values on the grounds of the heights of preceding items aligned in new ordering. The step is merely a visually receptive one.
  • Last but not the least; alter all DOM nodes items back to the non-offset sort of relative positioning. Here, no kind of visual change takes place but the now-relatively-positioned DOM nodes, in the natural ordering of the underlying list, will handle internal hover/expand/etc. style changes with proper shifting.

To solve this problem in React, Joshua Comeau presented a module named react-flip-move, which does a few things differently than Magic Move/Shuffle as listed:

  • It brings the FLIP procedure for hardware-accelerated 60FPS+ animations.
  • It provides options to "humanize" the shuffle by incrementally offsetting delay or duration.
  • It can also handle interruptions gracefully, resulting in no weird glitch effects.
  • Plus, a bunch of other neat stuff like start/finish callbacks.

An alternative to the given library is react-flip-toolkit whose comparison with two other libraries is provided in the given table:

Featurereact-flip-movereact-overdrivereact-flip-toolkit
Animate positionYYY
Animate scaleNYY
Animate opacityNYY
Animate parent's size without warping childrenNNY
Use real FLIP instead of cloning & crossfadingYNY
Use springs for animationsNNY
Support spring-based stagger effectsNNY
Usable with frameworks other than ReactNNY

The React-animate-reordering Library

The basic crux of the entire relisting is that when the elements in the react components are reordered then it results in their children be animated to respective new positions.

At the present moment, only the vertical movement is controlled, as well as including or eliminating the elements of the list not included in the animation. All the handling is done by the module react-shuffle, so it is an option. Nevertheless, it currently mounts children twice as well and doesn’t improvise the state properly on the children.

It is utterly based on what you would like to accomplish. Are you interested in the list reordering itself or would you rather present yourself with a react-draggable list?

The Utility

Here, it is essential that your application contains the following CSS rule.

1
2
3
4
.reorder-wrapper-item {
  position: relative;
  transition: top 1s ease-in;
}
css

After using this code, you are required to wrap up some of the elements associated with the AnimateReorder component. It is advisable that, while creating the application, you ensure that each element possesses a distinctive key set.

The code shown below indicates the coding done via AnimateReorder. All the arranged class components related to the list are displayed while precisely arranging the commands.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var AnimateReorder = require('react-animate-reorder');

class SomeComponent extends React.Component {
  render() {
    var list = [ /* ... */ ];
    return (
      <div >
        <AnimateReorder >
          {list}
        </ AnimateReorder>
      </ div>
    );
  
}
javascript

Conclusion

In this guide, you have learned about the use of react-animate-reordering library in animating list-reordering. You have also learned about the react-flip-toolkit library as an alternative to this problem and its comparison with two other libraries.

0