每个子元素ionic 2的具有时间延迟的动画
每个子元素ionic 2的具有时间延迟的动画
提问于 2016-08-29 21:47:16
我正在使用animate.css添加动画效果，我需要每个子元素时间延迟
对于推荐的添加图像
如何在ionic 2或Angular2中添加延时？还介绍了在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> 回答 1
Stack Overflow用户
发布于 2016-08-30 03:41:05
HeyHey！我没有试过，但我认为它应该能行得通！祝你好运！;)
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);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39207903
复制相关文章
相似问题