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: