Question

我使用角度cli创建了一个角度为7.1的项目。在本地使用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>

我试图检查我的网站的性能，但没有发现任何异常。所以我很想在这里迷路。

因此，非常感谢您提供有关此问题的任何信息。

谢谢

角度动画会在一段时间后冻结

0 个答案: