如何在预加载器加载后在Angular中不进行重定向的情况下加载网页

时间:2019-04-25 17:27:21

标签: javascript angularjs typescript loader preload

我使用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;
  }

0 个答案:

没有答案