0

How do we do the animation again in the opposite direction once it's immediately finished? It works fine if I do this.setState({slideUp: !this.state.slideUp}); inside a click handler. It's just when setting the state in the animations rest function it doesn't work and I cannot figure out why.

constructor(props)
{
    this.state = {
        slideUp: true
    }
}

_shuffleAnimationCallback = () => {
    ...
    this.setState({slideUp: !this.state.slideUp});
}


<Motion defaultStyle={{heightToInterpTo: 100}} style={{heightToInterpTo: spring(this.state.slideUp ? 0 : 100)}} onRest={() => this._shuffleAnimationCallback()}>
    {(values) => <ul style={{
              WebkitTransform: `translate3d(0, ${values.heightToInterpTo}%, 0)`,
              transform: `translate3d(0, ${values.heightToInterpTo}%, 0)`,}>
    {this.state.playlistComponent}
    </ul>}}
</Motion>
Martin Dawson
  • 7,455
  • 6
  • 49
  • 92
  • did you tried setting state in setTimeout/requestAnimationFrame? `setTimeout( () => this.setState({slideUp: !this.state.slideUp}), 10 );` – mauron85 Oct 04 '16 at 22:04
  • @mauron85 A bit of a hack but that does work well. Post an answer and unless a better one comes I'll mark yours. Using timeout of 0 works. Do you know why this works? – Martin Dawson Oct 05 '16 at 09:32
  • I would have to check source code of Motion lib to give you correct answer. I can only guess. Maybe it has something to do with setState. Can you log `this.state.slideUp` before calling setState in both cases (with and without timeout wrapper)? – mauron85 Oct 06 '16 at 15:04

0 Answers0