我希望卡片在滚动过程中出现在屏幕上。我对角度动画不太了解，但是我现在使用它
的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，但我做不到。如果有人希望提供一些库管理来制作动画，请随时举一个选定库的示例。
有几个选项可以实现此效果。首先，向组件添加：
@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});
}
动画应该出现。然后，您需要在滚动条中触发它。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句