Исчезать карты с прокруткой - угловой (я принимаю предложения библиотеки)

Question

Я бы хотел, чтобы карточки появлялись на экране во время прокрутки.Я не очень хорошо разбираюсь в угловой анимации, но я использовал ее сейчас

html:

<div class="row" *ngIf="posts">
  <div id="feed-{{post.id}}" (click)="getFeed(post)" *ngFor="let post of posts | conteudoFilter:nivel; " [@scrollAnimation]="state" 
  class="feed card col s12" >
  <img src="{{post.thumb}}" alt="" class="responsive-img">
  <!-- <div class="">{{post.descricao | titlecase}}</div> -->
</div>
</div>

<app-video *ngIf="currentVideo" [currentVideo]="currentVideo"></app-video>
<app-imgdisplay ></app-imgdisplay>

ts

export class FeedComponent implements OnInit {
  @ViewChild(VideoComponent) videoComp:VideoComponent;
  @ViewChild(ImgdisplayComponent) imgDisplay:ImgdisplayComponent;

  state = 'hide'

 public posts:Conteudo[];
 public nivel:{};
 public currentVideo;
 public currentImg: string;

  constructor(public auth:AuthService, public database:DatabaseService<Conteudo>, public router:Router, public el: ElementRef ) { 
  }

  ngOnInit() {
    console.log("ok");
    if(this.auth.User.nivel){
      this.nivel = {nivel:this.auth.User.nivel};
      this.database.listValues("CONTEUDO").subscribe(result => this.posts = result);
    }
  }

  @HostListener('window:scroll', ['$event'])
  checkScroll() {
    const componentPosition = this.el.nativeElement.offsetTop
    const scrollPosition = window.pageYOffset

    if (scrollPosition >= componentPosition) {
      this.state = 'show'
    } else {
      this.state = 'hide'
    }

  }

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

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

Answer 1

Есть пара вариантов для достижения этого эффекта.Во-первых, к компоненту добавьте:

@Component({
  ..
  animations: [rowsAnimation],
})

Затем создайте анимацию с постепенным перемещением слева направо.

import { trigger, sequence, animate, transition, style } from '@angular/animations';

export const rowsAnimation =   trigger('rowsAnimation', [
    transition('void => *', [
      style({ 'height': '*', 'opacity': '0', 'transform': 'translateX(-550px)', 'box-shadow': 'none' }),
      sequence([
        animate('.35s ease', style({
          'height': '*',
          'opacity': '.2',
          'transform': 'translateX(0)',
          'box-shadow': 'none',
        })),
        animate('.35s ease', style({
          height: '*',
          opacity: 1,
          transform: 'translateX(0)',
        })),
      ]),
    ])
]);

Затем добавьте анимацию в html.

<div class="row"
     *ngIf="posts">
    <ng-container *ngFor="let post of posts | conteudoFilter:nivel; ">
        <div id="feed-{{post.id}}"
             (click)="getFeed(post)"
             [@rowsAnimation]=""
             class="feed card col s12">
            <img src="{{post.thumb}}" alt="" class="responsive-img">
            <!-- <div class="">{{post.descricao | titlecase}}</div> -->
        </div>
    </ng-container>
</div>

Анимация установлена ​​на void => *, это означает, что она появится при добавлении новой строки в DOM.Последний шаг - добавить эти строки одну за другой.Ниже приведен простой пример, если анимация работает:

addRow() {
  this.posts.push({id: 1});
}

Анимация должна появиться.Затем вам нужно вызвать его в свитке.