Sad - ReactCSSTransitionGroup doesn't work. Please Help

Sad - ReactCSSTransitionGroup doesn't work. Please Help
0

#1

The variable items will contain all the messages in the conversation

import ReactCSSTransitionGroup from 'react-addons-css-transition-group; // ES6
//I included only the parts of the code that matter

  render() {
     
let items=Object.keys(this.state.chat).map((key, i) => {
  return ( 
    <div>
    {this.state.chat[key].id=="human"? 
    (<div key={i}>
  <div className="clear"></div>
    <div className="from-me">
      <p>{this.state.chat[key].text}<span className="time-right-a">{this.state.chat[key].time}</span></p>
    </div>
    </div>):
    (<div key={i}>
    <div className="from-them">
      <p>{this.state.chat[key].text}<span className="time-right">{this.state.chat[key].time}</span></p>
    </div>
    </div>)} 
    </div>
    );
});
<ReactCSSTransitionGroup
  transitionName={ {
    enter: '.new-message'
  } }>
  {items}
</ReactCSSTransitionGroup>

CSS:

.new-message{
  animation: 1s ease-out 0s 1 slideIn2;
}

@keyframes slideIn2 {
  0% {
    opacity:0.8;
    transform: translateX(1%);
  }
  20%{
   transform: translateX(-1%); 
  }
  40%{
   transform: translateX(1%); 
  }
  60%{
   transform: translateX(-1%); 
  }
  80%{
   transform: translateX(1%); 
  }
  100% {
    opacity:1;
    transform: translateX(0);
  }
}


Documentation:

or as an alternative:


#2

Check the class is being added/removed at the time you want it to in the devtools. You shouldn’t need anime.js, all the csstranstition group is doing is adding/removing classes when things mount/unmount


#3

No, the class doesn’t get added.


#4

I see, it was added but there was no transition timeout. And it was added to the last item rather than the first one.