GSAP с React.js

Question

GSAP с React.js

Я сталкиваюсь с этой проблемой. Я использую 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()
}

-1

javascript reactjs gsap tweenmax timelinemax

Источник

user7602219 25 янв '18 в 10:48

2 ответа

Другие вопросы по тегам javascript reactjs gsap tweenmax timelinemax

user2716555 25 янв '18 в 18:43 2018-01-25 18:43 · Answer 1 · 2018-01-25 18:43

Вы должны прочитать немного о реакции перед использованием

https://reactjs.org/tutorial/tutorial.html

но, отвечая на ваш вопрос, сначала вам не нужно использовать jquery

Как добавить событие прокрутки в компоненте реакции

this.state должен содержать только "состояние", состояние представления, вещи, которые используются в функции рендеринга, каждый раз, когда вы вызываете setState, представление будет перерисовываться, поэтому вы можете использовать setState для изменения стиля, в вашем случае это выглядит так вам нужно изменить стиль на основе timeLineMax, вы должны получить значение, которое вы хотите изменить, из timeLineMax и использовать setState этого конкретного значения, которое вы не должны сохранять в состоянии tl.

просто еще одна вещь, JavaScript использует CamelCase для функций, а не snake_case

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