页面加载时,事件侦听器将自行触发,但仅通过单击按钮即可使其触发。解决此问题的方法是什么?代码如下:

class IntroAnimations{
    constructor() {

        //global variables
        this.jsLoadingCta    = document.querySelector('#js-loading-cta');
        this.tlRemoveLoading = new TimelineMax();

        //event listeners: ISSUE HERE
        this.jsLoadingCta.addEventListener('click', this.removeLoadingContent(this.tlRemoveLoading));

        //method calls:
        this.loadAnimations(this.jsLoadingCta);

    };

    removeLoadingContent(tl){

        let jsLoadOverlay = document.querySelector('#js-overlay-load');

        tl
        .to(jsLoadOverlay, 1, {width: '100%', ease: Power4.easeInOut})
        .set(jsLoadOverlay, {left: 'auto', right: 0})
        .to(jsLoadOverlay, 1, {width: '0%', ease: Power4.easeInOut})

    }

    loadAnimations(loadingCta){

        //variables
        let jsloadingCompanyintrotextset1 = document.querySelector('#js-loading-company-intro-text-set-1'),
            jsloadingCompanyintrotextset2 = document.querySelector('#js-loading-company-intro-text-set-2'),
            jsloadingCompanyintrotextset3 = document.querySelector('#js-loading-company-intro-text-set-3'),
            tlIntro                       = new TimelineMax();


        //instaniation of SplitText
        let companyIntro1 = new SplitText().configureDomElement(jsloadingCompanyintrotextset1),
            companyIntro2 = new SplitText().configureDomElement(jsloadingCompanyintrotextset2),
            companyIntro3 = new SplitText().configureDomElement(jsloadingCompanyintrotextset3);


        //GSAP Animations
        tlIntro
        .set([companyIntro1, companyIntro2, companyIntro3], {x: 20, opacity: 0})
        .staggerTo(companyIntro1, 1, {x: 0, opacity: 1, ease: Power4.easeOut}, .02)
        .staggerTo(companyIntro2, 1, {x: 0, opacity: 1, ease: Power4.easeOut}, .02, '-=.95')
        .staggerTo(companyIntro3, 1, {x: 0, opacity: 1, ease: Power4.easeOut}, .02, '-=.9')
        .to(loadingCta, 1, {x: 0, opacity: 1, autoAlpha: 1, ease: Power4.easeOut}, '-=.9')

    };
};


谢谢。为什么会这样呢?是否需要绑定?

最佳答案

当使用这样的括号this.removeLoadingContent(this.tlRemoveLoading)时,它将在加载时触发。
您需要它例如this.removeLoadingContent
由于您对this.tlRemoveLoading所做的所有操作都传递了new TimelineMax(),因此请尝试执行以下操作

    //event listeners: ISSUE HERE
    this.jsLoadingCta.addEventListener('click', this.removeLoadingContent);

removeLoadingContent(){

    let jsLoadOverlay = document.querySelector('#js-overlay-load');
    let tl = new TimelineMax();

    tl
    .to(jsLoadOverlay, 1, {width: '100%', ease: Power4.easeInOut})
    .set(jsLoadOverlay, {left: 'auto', right: 0})
    .to(jsLoadOverlay, 1, {width: '0%', ease: Power4.easeInOut})

}

10-05 20:50
查看更多