Question

在角度你可以错开动画，就像我在这里做的那样：

 <div
  masonryLayout
  [masonryOptions]="masonryOptions"
  [input]="photos"
  class="grid"
  [@photosAnimation]="photos.length"
  >
    <img
      *ngFor="let photo of photos; let i = index"
      (click)="onPhotoClick(photo)"
      src="{{photo.photo.medium}}"
      class="grid-item clickable hover-outline"
      [ngClass]="[photo.addedToCart ? 'in-cart-icon':'']"
      alt="{{photo.motive}}"
    />
</div>

我不断根据需要在列表中添加新项目，例如用户点击“显示更多照片”按钮。但这会在所有照片上重新触发动画，我怎么只能错开动画列表的一部分？

编辑：我有两种不同的半解决方案，

1）第一张照片立即加载，后续照片加载错开：

animations: [
    trigger('photosAnimation', [
      transition('* => *', [
        query(
          ':enter',
          style({ opacity: 0, transform: 'translateY(-20%)' }),
          { optional: true }
        ),
        query(
          ':enter',
          stagger('100ms', [
            animate('100ms', style({ opacity: 1, transform: 'translateY(0)' }))
          ]),
          { optional: true }
        )
      ])
    ])
  ]

2）当新的照片添加到列表中时，另一个选项会重新设置所有照片的动画：

animations: [
    trigger('photosAnimation', [
      transition('* => *', [
        query(
          '*',
          style({ opacity: 0, transform: 'translateY(-20%)' }),
          { optional: true }
        ),
        query(
          '*',
          stagger('100ms', [
            animate('100ms', style({ opacity: 1, transform: 'translateY(0)' }))
          ]),
          { optional: true }
        )
      ])
    ])
  ]

这些半解决方案都没有完全满足我在第一个列表中错开和在列表中添加动画的愿望。

Answer 1

我碰到了这个。因为你不能绑定到动画中的变量。我最终将我的新结果加载到数组中并将该块推送到数组中。然后将ngFor包装在另一个遍布数组块的ngFor中。

这是HTML

<div *ngFor="let chunk of S.pictureChunks [@listAnimation]="S.pictureChunks.length">
   <div *ngFor="let picture of chunk">
    <img [@childAnimation]="S.pictureChunks.length" [src]='picture'>
  </div>

这是我的列表

的动画代码

    trigger('listAnimation', [
  transition('* => *', [
    query('@childAnimation', stagger(50, [
      animateChild()
    ]), { optional: true })
  ])
]),
trigger('childAnimation', [
  transition(':enter', [
    style({ opacity: 0 }),
    animate(300, style({ opacity: 1 }))
  ])
]

使用Angular动画在列表的新项目上交错动画？

1 个答案: