Есть ли способ отдельно использовать одну и ту же анимацию для всех элементов, сгенерированных ngFor в Angular? - PullRequest
Новая
       5

Есть ли способ отдельно использовать одну и ту же анимацию для всех элементов, сгенерированных ngFor в Angular?

1 голос
/ 11 февраля 2020

Итак, у меня есть элемент div, который я * l oop над ngFor, и для каждого элемента у меня работает анимация.

Проблема, с которой я столкнулся, заключается в том, что анимация работает одновременно на всех элементах. и я хочу, чтобы он работал для одного элемента за раз. Может ли кто-нибудь помочь мне с этим? 

<div *ngFor="let product of products" @fadeIn>
    Something in here...</div>

1 Ответ

1 голос
/ 11 февраля 2020

Если вы хотите добавить задержку до того, как следующий элемент будет анимирован, вы можете использовать метод смещения

Ваш код станет:

HTML

<div [@fadeIn]="products.length">
  <div *ngFor="let product of products">
    Something in here...
  </div>
</div>

TS 

trigger('fadeIn', [
  transition('* => *', [
    query(':enter', [
      style({ opacity: 0 }),
      stagger(100, [
        animate('0.5s', style({ opacity: 1 }))
      ])
    ])
  ])
])
...