滚动淡化卡片 - 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'
    }

  }

我应用的过渡没有按我想要的那样工作，滚动页面，所有卡片同时出现，但我希望效果应用到每张卡片上dividually as it appears on屏幕

我认为问题出在我的身上，我已经尝试切换到另一个 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});
}

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

滚动淡化卡片 - angular（我接受图书馆的建议）

Fade cards with scrolling - angular (I accept library suggestions)

css

angular

animation

angular-animations