Why animation does not work in react?

Question

I make a chat on the react/redux . On the page I get from the redux array with all the dialogs. Then I draw an opening button for each of them. I need to add an animation to open each dialog. For this, in the reducer I open the dialog, add the field animate = true;

And when I render the page, I check if this field is true, then I add the class dialog_animate to the element

Here is the component code:

class PageDialogs extends Component {
   sortDialogs(dialogs){
      return dialogs.sort(function(a, b){
         if (a.openedAt < b.openedAt) {
            return -1;
         }
         else if (a.openedAt > b.openedAt) {
            return 1;
         }
         else {
            return 0;
         }
      });
   }
   showDialogs(){
      return this.props.dialogs.map(function(dialog, key){
         if (dialog.active) {
            return (
               <div key={key} className={dialog.animate ? 'dialog_animate' : ''} >
                  <Dialog  dialog={dialog} />
               </div>
            );
         }
      })
   }
   render() {
      if (typeof this.props.dialogs !== 'undefined') {
         return (
            <div>
               <div className='page-dialogs'>
                  {this.showDialogs()}
               </div>
            </div>
         );
      }
      else {
         return (
            <div>
               <Preloader />
            </div>
         )
      }
   }
}

css:

.dialog_animate {
  animation: dialog_animate 5s ease-in-out forwards;
  -webkit-animation: dialog_animate 5s ease-in-out forwards;
}

In this form, the animation works. But I need this.props.dialogs to start sorting. If this.props.dialogs is replaced by this.sortDialogs (this.props.dialogs) then the problem begins. Then the animation starts only once. More precisely only for the first object. If I within 5 seconds, which lasts the animation will open a few chats, then the animation in the first place and the last one will end, and then it will no longer be.

At once I will say that the dialog_animate class for chats is added correctly, for the open add, and for all the rest is removed.

Tell me what can be the reason and how this can be fixed?

Thank you.

Answer 1

I'm not quite sure if I understand this correctly. However, 5s is a long animation. Especially when the React component rerenders every time it receives new props.

I would properly make a component for a single dialog, and (if possible) keep the animation within.

Otherwise, you could structure your code a bit differently.

export default class PageDialogs extends React.PureComponent {
    sortDialogs = (dialogs) => {
        return dialogs.sort((a, b) => {
            if (a.openedAt < b.openedAt) {
                return -1;
            } else if (a.openedAt > b.openedAt) {
                return 1;
            } else {
                return 0;
            }
        });
    }
    showDialogs = (sortedDialogs) => {
        return sortedDialogs.map((dialog, key) => {
            if (dialog.active) {
                return (
                    <div key={key} className={dialog.animate ? 'dialog_animate' : ''} >
                        <Dialog dialog={dialog} />
                    </div>
                );
            }
        });
    }
    render() {
        const { dialogs } = this.props;
        if (!dialogs) {
            return null;
        }
        // consider sorting on a higher level
        const sortedDialogs = this.sortDialogs(dialogs);
        // It would be better if this was it's own component.
        const displayedDialogs = this.showDialogs(sortedDialogs);
        return (
            <div>
                <div className="page-dialogs">
                    {displayedDialogs}
                </div>
            </div>
        );

        // etc...
    }

}