Question

我使用Angular和Ionic创建了一个使用Firebase订阅方法来检索数据的应用程序。我创建了一个动画，该动画循环通过在divs中重复的*ngFor来创建动画延迟，并使用关键帧将每个divs的不透明度从0更改为.5到1。

#neededfoodnames {
  animation: fadeIn 0.5s linear;
  animation-fill-mode: both;
}

// Set delay per List Item
@for $i from 1 through 100 {
  #neededfoodnames:nth-child(#{$i}) {
    animation-delay: .25s * $i;
  }
}

// Keyframe animation
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

但是，由于我使用Firebase的订阅方法来侦听更改，因此，每次更新项目时，都会为该项目再次触发动画。

我希望该动画仅在加载时发生，而不是在对项目进行更改时发生。

我尝试使用基于布尔值的ngClass。在加载时，我已将布尔值设置为true以触发动画，但我还创建了一个setTimeout()方法以在指定时间后将布尔值更改为false。

HTML：

<div id="neededfoodnames" *ngFor="let list of lists; let i = index" [ngClass]="{'neededfoodnames':animate == true}">
  ...
</div>

TypeScript：

export class HomePage {

  lists: FirebaseListObservable<any[]>;
  animate: boolean;

  constructor() {
    this.animate = true;

    setTimeout(() => {
      this.animate = false
    }, 4000);
  }

}

CSS也已更新为使用neededfoodnames作为类而不是ID。

使用此方法，我目前已对setTimeout()的毫秒进行了硬编码。如果继续使用此方法，则需要找到一种动态设置毫秒的方法。

我已经创建了一个example on Stackblitz我想要达到的目标，但是它之所以有效，是因为它没有从Firebase检索数据。

是否有更好的方法仅在加载时而不是在数据更改时触发此动画？还是找到并设置setTimeout()的毫秒数是我的最佳选择？

仅在加载时对项目进行动画处理

0 个答案: