GSAP 与 React.js答案

【问题标题】：GSAP with React.jsGSAP 与 React.js
【发布时间】：2018-01-25 10:48:42
【问题描述】：

我遇到了这个问题。我在 react 项目中使用 GSAP 来做一些复杂的动画。我想问一下，每当组件重新渲染时，如何清除应用在 DOM 上的样式。它仍然保持旧状态，即 tl.reverse()。我再次将其设置为 Null 并重新定义，但我不起作用。我也是新来的反应。下面是代码。希望有人能帮忙

componentDidMount () {
    this.menu_init()
    this.cta_animation_init()
    // this.cta_animation_active()
    this.hover_effect()
    $(window).on('scroll', function () {
        var t = $(window).scrollTop()

        if ((t > 0 && self.state.currentPos < t) || (t > self.state.min_height && self.state.currentPos > t) || $(window).width() <= 1020) {
            self.menu_scroll()
        } else {
            self.menu_scrolling()
        }
        self.state.currentPos = t
    })
}
componentWillUnmount()
{
}

menu_init () {
    const tl = new TimelineMax({paused: true});
    tl.to('.top-nav', 0.3, {y: '-165px', ease: Power0.easeNone})
        .to('.burger-nav-bg, .burger-nav-button', 0.1, {opacity: 1, scale: 1}, '-=.3')
        .staggerTo('.burger-nav-bar', 0.1, {left: '13px'}, '-=.1')
    this.setState({tl:tl})
}

menu_scroll () {
    this.state.tl.play()
}

menu_scrolling () {
    this.state.tl.reverse()
}

【问题讨论】：

标签： javascript reactjs gsap

【解决方案1】：

你应该在使用它之前阅读一些关于 react 的内容

https://reactjs.org/tutorial/tutorial.html#what-is-react

但回答你的问题，首先你不需要使用 jquery

How to add scroll event in react component

this.state 应该只包含“状态”视图的状态，在渲染函数中使用的东西，每次调用 setState 视图都会重新渲染，因此您可以使用 setState 更改样式，在您的情况看起来您需要根据 timeLineMax 更改样式，您应该从 timeLineMax 获取您想要更改的值并使用这个特定值的 setState，您不应该将 tl 保存在状态上。

还有一件事 javascript 使用 camelCase 来表示函数而不是 snake_case

http://www.j-io.org/Javascript-Naming_Conventions

【讨论】：

我认为劝阻初学者的评论是不必要的。在 React 中访问 DOM 元素并不是一件简单的事情。

【解决方案2】：

如果今天有人想做这样的事情，使用 GSAP 3 和状态钩子，这里是 github 上的一个工作示例：

https://github.com/npinos/cloud-animations-react-gsap

【讨论】：