Запустить анимацию на Scroll Angular 6 - PullRequest
Новая
       13

Запустить анимацию на Scroll Angular 6

0 голосов
/ 30 июня 2018

Я в основном делаю приложение Angular 6, которое устаревает массив элементов и отображает их, используя * ngFor. То, что я хочу, это анимировать затем один за другим, когда окно находится в определенной позиции (смещение по Y), то есть начать анимацию, когда окно находится в определенной позиции по Y.

Следующий код прекрасно создает анимацию для каждого элемента (показывать после другого, без анимации), но запускается, как только загружается компонент.

Как я могу удерживать элементы анимации, пока окно не будет в определенной позиции Y? 

trigger('fadeListAnimation', [
  transition('* => *', [
    query(':enter',
      style({ opacity: 0, transform: 'scale(0.9)' }),
      { optional: true }
    ),

    query(':enter',
      stagger(150, [
        animate('.15s ease-out',
          keyframes([
            style({ opacity: 0, transform: 'scale(0.9)' }),
            style({ opacity: 1, transform: 'scale(1)' })
          ])
        )
      ]),
      { optional: true }
    ),

    query(':leave',
      stagger(150, [
        animate('.15s ease-out',
          keyframes([
            style({ opacity: 1, transform: 'scale(1)' }),
            style({ opacity: 0, transform: 'scale(0.9)' })
          ])
        )
      ]),
      { optional: true }
    )
  ])
]);

Заранее спасибо!

1 Ответ

0 голосов
/ 19 июля 2018

Я исправил это, скрыв элемент, пока он не будет виден с помощью *ngIf

...