我使用Gsap API为进度条动画创建了预加载器动画,但是加载进度条后,我想在加载完成后立即显示索引网页,而无需重定向到该页面,而是显示有效的页面使用有角度的显示页面的最佳做法。示例网站https://greeeg.com/ 代码
ngOnInit() {
this.count = this.count.nativeElement;
this.progress = this.progress.nativeElement;
this.panel = this.panel.nativeElement;
this.panel1 = this.panel1.nativeElement;
this.panel2 = this.panel2.nativeElement;
this.panel3 = this.panel3.nativeElement;
this.panel4 = this.panel4.nativeElement;
this.timer = 4;
this.master = new TimelineLite();
this.master.add(this.progressLoader());
this.master.addLabel('panel', '+=0.3');
this.master.add(this.verticalShow(this.panel), 'panel');
this.master.add(this.verticalShow(this.panel1), 'panel+=0.3');
this.master.add(this.verticalShow(this.panel2), 'panel+=0.5');
this.master.add(this.verticalShow(this.panel3), 'panel+=0.6');
this.master.add(this.verticalShow(this.panel4), 'panel+=0.7');
}
progressLoader() {
const tl = new TimelineLite();
tl.to(this.progress, this.timer, {
width: '100%',
ease: Linear.easeOut,
onUpdate: () => {
const newPercent = Math.floor((tl.progress() * 100));
console.log(newPercent);
this.count.innerHTML = newPercent + '%';
}
});
return tl;
}
verticalShow(elm: any) {
const tl = new TimelineLite();
tl.to(elm, 3, {
width: '100%',
ease: Power2.easeOut
});
tl.staggerTo(elm, 1, {
width: '50%',
opacity: 1
});
return tl;
}