Реакция событий жизненного цикла отменяет анимацию GSAP

Question

Я пытаюсь использовать GSAP с React и сталкиваюсь с ситуацией, когда моя анимация отменяется.

Мой компонент - это боковая панель, которая появляется, только если свойство 'show' в состоянии true. Внутри компонента мои основные функции:

shouldComponentUpdate(nextProps, nextState) { 
  return nextState.show !== this.state.show; 
}

componentWillUpdate(nextProps, nextState) {
  if (nextState == true) {
    // animate the sidebar in
  } else {
    // animate the sidebar out
  }
}

toggleSidebar() { 
  const newState = !this.state.show;
  this.setState({ show: newState })
}

По какой-то причине, когда я нажимаю кнопку, чтобы вызвать функцию toggleSidebar, боковая панель начинает анимироваться, а затем сразу же анимируется.

У меня есть чувство, потому что componentWillUpdate возвращается слишком рано, но я не уверен.

На данный момент я думаю только о том, чтобы использовать TransitionGroup и включить код анимации GSAP в хуки жизненного цикла componentWillEnter / componentWillLeave, чтобы они могли функционировать должным образом, но мне интересно, есть ли способ решить эту проблему.

Answer 1

Одна общая причина в том, что toggleSidebar вызывается дважды. Это иногда случается с браузером Safari, но я также видел некоторые случаи в браузере Chrome. Вы можете попробовать использовать e.preventDefault на получающем событии от вашего нажатия кнопки или используйте старый логический флаг моды, например

toggleSidebar() {
    if (isAnimating) {
        isAnimating = !isAnimating;
        return;
    }
    isAnimating = true;
    const newState = !this.state.show;
    this.setState({
        show: newState
    })
}