css - 带有滚动的淡入淡出卡片 - Angular (我接受图书馆的建议)

Question

我希望卡片在滚动过程中出现在屏幕上。我对 Angular 动画不是很了解，但我暂时使用它

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

动画应该出现。然后你需要在滚动中触发它。