Question

我正在尝试使用Ionic从元素列表中创建效果。我正在使用库animate.css，我想在构成列表的元素之间做一个延迟。在这个example中，它显示了我想要做什么。

问题是我不知道如何在css上为每个项目设置一个dinamicly延迟。

这是我的代码：

<ion-content padding>
 <ion-card>
  <ion-card-header>
   <ion-card-title>Rooms Avaliables</ion-card-title>
  </ion-card-header>
 <ion-list>
  <ion-item class="animated fadeInLeft" *ngFor="let room of rooms">
    {{room |json}}
  </ion-item>
 </ion-list>
</ion-card>
</ion-content>

但显然，我得到的所有物品都是同时留下的。

非常感谢，任何建议都会受到赞赏。

Answer 1

您可以使用ts文件中的小提琴进行操作。当您分配放入列表中的项目时，实施这样的短暂延迟：

TS：

for (let i = 0; i < that.deviceArray.length; i++) {
        setTimeout(function() {
            that.animateItems.push(that.deviceArray[i]);
        }, 200 * i);

HTML：

        <ion-list no-margin>
            <ion-item  *ngFor="let item of animateItems; let i = index;" 
            [ngClass]="ZoomAnimationClass" 
            (click)="goToDevice(i)">
            ... put your stuff in here...
            </ion-item>
        </ion-list>

然后在scss中，使用类似以下的内容：

.zoomyInAnimation {
    //color:#808080;
    -webkit-animation: zoomIn 500ms;
    -moz-animation: zoomIn 500ms;
    -o-animation: zoomIn 500ms;
    animation: zoomIn 500ms; 
}

然后要获得奖励积分，您可以在TS中以编程方式执行此操作：

this.ZoomAnimationClass = { 'zoomyInAnimation': true };

我已经尝试过了，而且行得通。但是，如果代码不够完美，我们深表歉意！

Answer 2

如果使用SASS，则可以使用迭代器为元素添加延迟：

@for $i from 1 through 10 {
    &:nth-child(#{$i}) { 
        @include transition-delay(0.05s * $i); 
    }
}

Answer 3

抱歉，我对Angular了解不多。一个快速的解决方案是通过JS或jQuery将延迟添加到列表项中。

首先，我为您的列表项目提供了一类.room-item。然后我在jQuery中使用.each()给它们交错的延迟：

let items = $(".room-item");
let time = 500; 
let timeUnit = 'ms';  

 items.each(function(index){
     $(this).css({
          'animation-delay' : (1+index) * time + timeUnit
     });
 });

这是一个带有ngFor-List的工作演示：

https://plnkr.co/edit/40pjd9t8rVTMG2k9XZnz?p=preview

我在app/app.component.ts中添加了脚本：

 ngAfterViewInit() {

    let items = $(".room-item");
    let time = 500; 
    let timeUnit = `ms`;  

     items.each(function(index){
         $(this).css({
              'animation-delay' : (1+index) * time + timeUnit
         });
     });

}

animation.css延迟ion-list

3 个答案:

TS：

HTML：