Ошеломляющая анимация только для новых элементов списка с использованием анимации Angular?

В angular вы можете поразить анимацию, как я делаю здесь, например:

 <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 }
        )
      ])
    ])
  ]

Ни одно из этих полурешений полностью не удовлетворяет моему желанию как шататься в первом списке, так и оживляться в дополнениях к списку.


angular angular-animations
person Sawri    schedule 07.10.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я столкнулся с этим. Поскольку вы не можете привязываться к переменной в анимации. В итоге я загрузил свои новые результаты в куски массивов и поместил этот кусок в массив. Затем оборачиваем 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>

Here is my animate code for list

    trigger('listAnimation', [
  transition('* => *', [
    query('@childAnimation', stagger(50, [
      animateChild()
    ]), { optional: true })
  ])
]),
trigger('childAnimation', [
  transition(':enter', [
    style({ opacity: 0 }),
    animate(300, style({ opacity: 1 }))
  ])
]
person Josh Eastwood    schedule 23.10.2017
comment
Что делать, если несколько элементов помещаются одновременно? Как расположить только новые элементы? - person amit77309; 14.05.2018
comment
используйте *ngFor=let изображение чанка; пусть i = index и [@childAnimation]=(i ›loaded) ? 'Animate' : null и установите переход('Animate', - person Josh Eastwood; 22.05.2018