I am trying to animate adding a new comment in my React + Redux app with react-motion.
class Comments extends Component {
getDefaultStyles() {
const { comments } = this.props;
return comments.map((c, i) => {
return {
key: "" + i,
style: { top: -50, opacity: 0.2 },
data: c
}
});
}
getStyles() {
const { comments } = this.props;
return comments.map((c, i) => {
return {
key: "" + i,
style: {
top: spring(0, presets.gentle),
opacity: spring(1, presets.gentle)
},
data: c
}
})
}
willEnter() {
return { top: -50, opacity: 0.2 }
}
render() {
let { comments } = this.props;
return (
<div>
<TransitionMotion defaultStyles={this.getDefaultStyles()} styles={this.getStyles()} willEnter={this.willEnter}>
{styles =>
<div>
{
styles.map((c) => {
return (
<Comment key={c.key} comment={c.data} style={{...c.style, overflow: 'hidden'}} />
)
})
}
</div>
}
</TransitionMotion>
</div>
)
}
}
Then the style is passed to the first div in Comment component.
While loading the comments the animation is OK. But user add a comment, and then the fetchComments method is called to fetch all the comments, the animation does not occur. Is this something to do with redux? I am passing my comment using mapStateToProps and connect.
