через некоторое время угловая анимация зависает

Question

Я создал проект с Angle 7.1, используя Angle Cli.локально протестировано без учета 7.1.3 и проблема не устранена.

проект доступен в режиме онлайн в https://www.windy.co.il

Я создал компонент с изображениями, которые постепенно исчезают друг от друга при масштабировании.

поэтому, как только изображение появляется ... оно медленно увеличивается ... и как только показывается следующее изображение, появляются эффекты затемнения, в то время как следующее изображение также увеличивается ... поэтому эффект масштабирования никогда не прекращается, когда изображения переключаются друг от друга.

проблема в том, что через некоторое время браузер зависает (проверено на google chrome)

я попытался определить проблему .. и кажется, что когда я открываю другие вкладки и просматриваю их дляЧерез некоторое время, а затем вернитесь на вкладку моего веб-сайта, браузер зависает, и мне нужно принудительно закрыть его.

это файл машинописи компонента:

import {AfterViewInit, Component, OnInit} from '@angular/core';
import {animate, state, style, transition, trigger} from '@angular/animations';

@Component({
  selector: 'tuxin-ec-animate-images',
  templateUrl: './tuxin-ec-animate-images.component.html',
  styleUrls: ['./tuxin-ec-animate-images.component.scss'],
  animations: [
    trigger('visibilityChanged', [
      state('shown', style({ opacity: 1, transform: 'scale(1)'})),
      state('middle', style({opacity: 1, transform: 'scale(1.2)'})),
      state('hidden', style({ opacity: 0, transform: 'scale(1.3)' })),
      transition('shown => middle', animate('3900ms')),
      transition('middle => hidden', animate('2600ms')),
    ]),
  ]
})
export class TuxinEcAnimateImagesComponent implements OnInit, AfterViewInit {

  imgPosition = {
    1: {top: 0, left: 0},
    2: {top: 0, left: 0},
    3: {top: 0, left: 0},
    4: {top: 0, left: 0},
    5: {top: 0, left: 0},
    6: {top: 0, left: 0},
    7: {top: 0, left: 0},
    8: {top: 0, left: 0},
    9: {top: 0, left: 0},
    10: {top: 0, left: 0},
    11: {top: 0, left: 0},
    12: {top: 0, left: 0},
  };

  frontZIndex = 2;
  backZIndex = 1;

  currentImage = 2;

  imagesCount = 12;

  img1Image = 1;
  img2Image = 2;

  img1ZIndex = this.frontZIndex;
  img2ZIndex = this.backZIndex;

  img1AnimState = 'shown';
  img2AnimState = 'shown';

  nextImage() {
    if (this.currentImage+1>this.imagesCount) {
      this.currentImage = 1;
      return this.currentImage;
    } else {
      return ++this.currentImage;
    }
  }



  img1Loaded() {
  //  console.info('img1Loaded');

  }

  img2Loaded() {
   // console.info('img2Loaded');

  }

  img1AnimationEnded($event) {
    if ($event.toState === 'middle') {
      this.img1AnimState='hidden';
      this.img2AnimState='middle';
    } else if ($event.toState === 'hidden') {
      this.img1ZIndex = this.backZIndex;
      this.img2ZIndex = this.frontZIndex;
      this.img1AnimState='shown';
      this.img1Image = this.nextImage();
    }
  }

  img2AnimationEnded($event) {
    if ($event.toState === 'middle') {
      this.img2AnimState='hidden';
      this.img1AnimState='middle';
    } else if ($event.toState === 'hidden') {
      this.img2ZIndex = this.backZIndex;
      this.img1ZIndex = this.frontZIndex;
      this.img2AnimState='shown';
      this.img2Image = this.nextImage();
    }
  }

  constructor() { }

  ngOnInit() {
  }

  ngAfterViewInit() {
    this.img1AnimState = 'middle';
  }

}

и этоэто код шаблона html:

<div id="main">

  <img
    [@visibilityChanged]="img1AnimState"
    (load)="img1Loaded()"
    (@visibilityChanged.done)="img1AnimationEnded($event)"
    [ngStyle]="{'z-index': img1ZIndex, 'left': imgPosition[img1Image].left, 'top': imgPosition[img1Image].top}"
    src="../../assets/images-animate/{{img1Image}}.jpg"/>

  <img
    [@visibilityChanged]="img2AnimState"
    (load)="img2Loaded()"
    (@visibilityChanged.done)="img2AnimationEnded($event)"
    [ngStyle]="{'z-index': img2ZIndex, 'left': imgPosition[img2Image].left, 'top': imgPosition[img2Image].top}"
    src="../../assets/images-animate/{{img2Image}}.jpg"/>

  <div id="text">
    <div class="title">
      מגני רוח לרכב
    </div>
    <!--<div class="logo">
      www.windy.co.il
    </div>-->
    <div class="promotion">
      מבצעים חמים לחורף
    </div>
    <div class="phone">
      <div class="inline-phone">
      <a href="tel:0545232705">054-5232705</a>
      </div>
    </div>
  </div>

</div>

Я пытался проверить производительность моего сайта, и я не увидел ничего необычного.так что я, должно быть, здесь потерялся.

поэтому любая информация по этому вопросу будет принята с благодарностью.

спасибо