时间戳

首页 > 解决方案 > 仅在加载时为项目设置动画

javascript - 仅在加载时为项目设置动画

问题描述

使用 Angular 和 Ionic，我创建了一个使用 Firebase 订阅方法来检索数据的应用程序。我创建了一个动画，它divs在 a 中重复循环*ngFor以创建动画延迟并使用关键帧将每个divs不透明度从 0 更改为 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 的 subscribe 方法来监听更改，所以每次更新项目时，都会再次触发该项目的动画。

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

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

HTML：

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

打字稿：

export class HomePage {

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

  constructor() {
    this.animate = true;

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

}

CSS 也被更新为neededfoodnames用作类而不是 id。

使用这种方法，我目前对setTimeout()'s 毫秒进行了硬编码。如果我继续使用这种方法，我将需要找到一种方法来动态设置毫秒。

我已经在 Stackblitz上创建了一个我想要实现的示例，但它之所以有效，是因为它没有从 Firebase 检索数据。

有没有更好的方法来仅在加载时触发此动画，而不是在数据更改时触发？还是查找和设置setTimeout()'s 毫秒是我的最佳选择？

标签： javascriptangularfirebaseionic-frameworkangularfire2

解决方案

推荐阅读