I want the cards to appear on the screen as I scroll. My knowledge of angular animation is limited, but I have used it for now.
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'
}
}
The applied transition is not functioning as desired; when scrolling the page, all cards appear simultaneously. However, I would like the effect to be applied to each card individually as it comes into view on the screen.
I suspect the issue lies with my code. I have attempted to switch to another div without success. If anyone would like to suggest a library or provide an example for better animation management, please feel free to do so.