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