I'm getting in stuck with an animation problem by using react-flip-move.
If I animate a list, it works very well
render() {
return (
<FlipMove
staggerDurationBy={30}
duration={750}
delay={30}
enterAnimation={this.state.enterLeaveAnimation}
leaveAnimation={this.state.enterLeaveAnimation}
>
{this.state.contestant.map((element, id) => {
return (
<li onClick={() => this.rotate()} key={element.name}>
{element.name}
</li>
);
})}
</FlipMove>
);}
But if I animate a table, it will not work :(.
render() {
return (
<FlipMove
staggerDurationBy={30}
duration={750}
delay={30}
enterAnimation={this.state.enterLeaveAnimation}
leaveAnimation={this.state.enterLeaveAnimation}
>
<table>
<tbody>
{this.state.contestant.map((element, id) => {
return (
<tr onClick={() => this.rotate()} key={element.name}>
<td>{element.name}</td>
<td>{element.id}</td>
</tr>
);
})}
</tbody>
</table>
</FlipMove>
);}
I can not find the reason :'(. Hope you will support me. Thank you so much