react revert animation once it's finished

[MartinDawson]

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.

i.e. slide down immediately when slideup has finished.

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>

[MartinDawson]

setTimeout(() => this.setState({slideUp: false}), 0); in the rest callback function works...

Does anyone know why I have to use setTimeout instead of doing it instantly?

[Tsury]

Having the same issue...

[nkbt]

See https://github.com/nkbt/react-motion-loop