javascript - 完成后反应还原动画

Question

一旦动画立即完成，我们如何以相反的方向再次制作动画？如果我this.setState({slideUp: !this.state.slideUp});在点击处理程序中做，它工作正常。只是在动画休息功能中设置状态时它不起作用，我不知道为什么。

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>