Блог

Главная - Вопросы по программированию - анимация возврата реакции после ее завершения

анимация возврата реакции после ее завершения

#javascript #reactjs #react-motion

#javascript #reactjs #реагирует-движение

Вопрос:

Как мы можем снова выполнить анимацию в обратном направлении после ее немедленного завершения? Это работает нормально, если я делаю this.setState({slideUp: !this.state.slideUp}); внутри обработчика щелчков. Просто при настройке состояния в функции rest анимации это не работает, и я не могу понять, почему.

 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>

Комментарии:

1. вы пробовали устанавливать состояние в setTimeout / requestAnimationFrame? setTimeout( () => this.setState({slideUp: !this.state.slideUp}), 10 );

2. @mauron85 Немного взлом, но это работает хорошо. Отправьте ответ, и, если не появится лучший, я отмечу ваш. Использование тайм-аута 0 работает. Вы знаете, почему это работает?

3. Мне нужно было бы проверить исходный код библиотеки Motion, чтобы дать вам правильный ответ. Я могу только догадываться. Возможно, это как-то связано с setState. Можете ли вы войти this.state.slideUp в систему перед вызовом setState в обоих случаях (с оболочкой тайм-аута и без нее)?