每个子元素 ionic 2 的时间延迟动画

【问题标题】：Animations with time delay for each child element ionic 2每个子元素 ionic 2 的时间延迟动画
【发布时间】：2017-01-05 13:58:33
【问题描述】：

我正在使用animate.css添加动画效果我需要对每个子元素进行时间延迟

为推荐添加图片

如何在 ionic 2 或 Angular2 中添加时间延迟？还提到 this 在 ionic2 中实现

<ion-item *ngFor="let transLeaf of transLeafTmp" class="animated zoomIn">
    <ion-avatar item-left>
      <i class="icon" [style.background-color]="transLeaf.bgColor"><img src="{{transLeaf.categoryIcon}}"></i>
    </ion-avatar>
      <p>{{transLeaf.narration}}</p>
          <h3>heading</h3>
          <ion-note item-right class="transValue">
             <h2 test111</h2>
          </ion-note>
</ion-item>

【问题讨论】：

标签： javascript angular ionic-framework css-transitions ionic2

【解决方案1】：

嘿嘿！我没有尝试，但我认为它应该工作！祝你好运！ ;)

HTML

<ion-item *ngFor="let transLeaf of transLeafTmp;" [class.animated]="transLeaf.isAnimated" class="zoomIn">
  <ion-avatar item-left>
      <i class="icon" [style.background-color]="transLeaf.bgColor"><img src="{{transLeaf.categoryIcon}}"></i>
  </ion-avatar>
  <p>{{transLeaf.narration}}</p>
  <h3>heading</h3>
  <ion-note item-right class="transValue">
    <h2 test111</h2>
    </ion-note>
</ion-item>

TypeScript：

private ngAfterViewInit(){
  this.animateTransLeaf();
}

private animateTransLeaf(){
  let i = -1;

  while (++i < this.transLeafTmp.length) {
    setTimeout(() => {
      this.transLeafTmp[i].isAnimated = true;
    }, 50 * i);
  }
}

【讨论】：