Question

我遇到了这个问题。我在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()
}

Answer 1

在使用它之前，您应该阅读一些有关反应的内容

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

Answer 2

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

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

GSAP与React.js

2 个答案: