Как загрузить веб-страницу после предварительной загрузки без перенаправления в Angular - PullRequest
Новая
       20

Как загрузить веб-страницу после предварительной загрузки без перенаправления в Angular

0 голосов
/ 25 апреля 2019

Я создал анимацию предварительного загрузчика, используя 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;
  }
...