Question

我实际上很难想出来解决这个问题。

我有一个列表，显示在网格中。每3个元素，必须有一个自定义分隔符。另外，每个项目都必须进行动画处理：输入。

我面临的问题是，当前用于添加自定义分隔符的布局是下一个：

自定义分隔符的HTML标记（每列动画......不需要）

<ion-grid>
      <ion-row *ngFor="let row of stampRows"  [@stampsAnimation]="">
        <ion-col col-4 *ngFor="let stamp of row">
          <img [src]="stamp.image">
        </ion-col>

        <!-- empty containers in case row count doesn't get to 3-->
        <ion-col col-4 *ngIf="row.length === 1">
        </ion-col>
        <ion-col col-4 *ngIf="row.length === 1 || row.length === 2">
        </ion-col>
        <!-- / empty containers -->

        <ion-col col-1 class="divider1" no-padding>
        </ion-col>
        <ion-col col-11 class="divider2" no-padding></ion-col>
      </ion-row>
</ion-grid>

使用此标记，我可以根据需要添加分隔符。但动画每行动画，每个项目不动画。

现在这个标记允许我逐项设置动画，但我似乎无法添加自定义分隔符（由2个元素组成，使用20％和80％的宽度）。

工作动画的HTML标记（无法添加自定义分隔符...不需要）

<ion-grid>
      <ion-row [@stampsAnimation]="stamps.length">
        <ion-col col-4 *ngFor="let stamp of stamps">
          <img [src]="stamp.image">
        </ion-col>
      </ion-row>
</ion-grid>

这是我用于制作动画的代码：

分量中的动画代码

@Component({
  selector: 'page-my-stats',
  templateUrl: 'my-stats.html',
  animations: [
    trigger('stampsAnimation', [
      transition('* => *', [

        query(':enter', style({ transform: 'scale(0)' }), { optional: true }),

        query(':enter', stagger('50ms', [
          animate('0.25s ease-in', keyframes([
            style({transform: 'scale(0)'}),
            style({ transform: 'scale(1)'}),
            style({transform: 'scale(1.25)'}),
            style({transform: 'scale(1)'})
          ]))]), { optional: true })
      ])
    ])
  ]
})

正如您所看到的，要构建任何使用不同数组的HTML，其中一个直接包含项目（stamps []），另一个是包含行的数组（每行包含3个项目）。

数组示例

stampsRows = [[itemA, itemB, itemC], [itemD, itemE, itemF]];
stamps = [itemA, itemB, itemC, itemD, itemE, itemF];

所以，我需要自定义分隔符，并逐项制作动画，是否有人可以为此提供一些启示？

谢谢你的时间！

离子自定义分隔符和简单动画

0 个答案: