animation.css 延迟 ion-list 中的 ion-items答案

【问题标题】：animation.css delay the ion-items from ion-listanimation.css 延迟 ion-list 中的 ion-items
【发布时间】：2018-04-02 08:28:26
【问题描述】：

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

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

这是我的代码：

<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>

但显然，我得到的是所有项目 fadeIn 同时离开。

非常感谢，如有任何建议，将不胜感激。

【问题讨论】：

标签： css angular animation ionic3 animate.css

【解决方案1】：

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

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

【讨论】：

它可以工作，但我怎样才能动态地做到这一点？我的意思是，从 1 到 10，但我不知道我的列表的长度。抱歉，我从未使用过 Sass，有没有任何选项可以将信息作为变量传递？
不是您需要的解决方案。我希望你每页最多有条目或类似的东西。您可以通过 data-attribute (data-delay="x") 将循环计数写入您的元素，然后使用 Javascript 动态添加延迟。您是否看过 Angulars “交错”？ angular.io/api/animations/stagger 不过仍处于试验阶段。
空房数 {{room |json}}

【解决方案2】：

抱歉，我对 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
         });
     });

}

【讨论】：

【解决方案3】：

您可以使用 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 };

我已经尝试过了，它确实有效。但是如果代码不够完美，请道歉！

【讨论】：

请注意，如果您的项目清单很长，您需要缩短这个！