Question

我正在使用ionic2。我有product的数组。我正在使用网格视图显示产品。

<ion-row *ngFor="let i of rows" #myElem>
        <ion-col class="productlist" col-6 *ngFor="let p of product | slice:(i*2):(i+1)*2" (click)="nav(p.details.id)" > 
            <div class="product-image">
                <img src="{{p.details.P_IMAGES[0].URL}}" alt="Product 1">
            </div>

            <div class="product-blk">   
                <div class="product-title">{{p.details.P_TITLE}}</div>
                <div class="product-price">
                    <img src="./assets/images/rupee-yellow.svg" alt="Rupee">{{p.details.PRICE_SALE}}
                    <span>{{p.details.PRICE_REGULAR}}</span>
                </div>
                <div class="product-desc">
                    {{p.Desc}}
                </div>
            </div>
        </ion-col>
    </ion-row>

这是我的CSS：

.productlist {
      animation: FadeIn 1s linear;
      animation-fill-mode: both;
      animation-delay: .5s
  }

@keyframes FadeIn { 
  0% {
    opacity: 0;
    transform: scale(.1);
  }

  85% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

它完美无缺，但我需要在每个网格上设置动画延迟;我需要一个像这样的自定义CSS类：

.productlist:nth-child(1),.productlist:nth-child(2),..

我该怎么做？

Answer 1

这是您需要的CSS：

.productlist:nth-child(1) {
  animation-delay: 1s;
}

.productlist:nth-child(2) {
  animation-delay: 2s;
}

.productlist:nth-child(3) {
  animation-delay: 3s;
}

.productlist:nth-child(4) {
  animation-delay: 4s;
}

为简洁起见，您可以在像Sass这样的CSS预处理器中编写for循环：

@for $i from 1 through 4 {
    .productlist:nth-child(#{$i}){
      animation-delay: $i + s;
    }
}

如何使用* ngFor与ionic2，angular2添加第n个子类

1 个答案: