Question

我试图在React中使用GSAP，并且我遇到了我的动画被取消的情况。

我的组件是一个补充工具栏，只有在＆＃39;显示＆＃39;该州的财产是真实的。在组件内部，我的主要功能是：

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并在componentWillEnter / componentWillLeave生命周期钩子中包含GSAP动画代码，以便它们能够正常运行但我很好奇是否有任何问题。解决这个问题的方法。

Answer 1

一个常见原因是toggleSidebar被调用两次。 Safari浏览器有时会发生这种情况，但我也在Chrome浏览器中看到了一些情况。您可以尝试在按钮单击的接收事件中使用e.preventDefault，也可以使用旧时尚布尔标记，例如。

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

React生命周期事件取消GSAP动画

1 个答案: