使用React.js的GSAP [英] GSAP with React.js

问题描述

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

I encounter this problem. I use GSAP in react project to do some complicated animation. I want to ask that how can I clear the style applied on the DOM whenever the component re-render. It still keeps the old state which is the tl.reverse(). I set it it to Null again and re-define but i doesnt work. I'm also new to react. Below is code. Hope anyone can help

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()
}

推荐答案

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

You should read a bit about react before using it

https://reactjs.org/tutorial/tutorial.html#what -是反应

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

but answering your question, first you don't need to use jquery

如何在react组件中添加滚动事件

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

this.state should only contain "state" the state of the view, things that are used in the render function, everytime you call setState the view will be re-rendered so you can use setState to change the style, in your case looks like you need to change the style based on timeLineMax, you should grab the value that you wanna change from timeLineMax and use setState of this particular value you shouldn't save tl on the state.

JavaScript仅将一件事用于功能而不是snake_case

just one more thing javascript uses camelCase for functions not snake_case

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

这篇关于使用React.js的GSAP的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！