我订阅了 Firebase 实时数据库，因此当我向它提交内容时，它会立即呈现在视图中，而无需任何 jQuery 或 ajax。
我想对这些元素的渲染进行动画处理，这样当一个新元素被添加到 DOM 时，它的div 的background-color 是绿色的并且会慢慢消失。我不希望此类的所有divs 在加载时执行此动画。
我知道怎么做前者：
@keyframes green-fade {
0% {background: rgb(173, 235, 173);}
100% {background: none;}
}
.post-div {
animation: green-fade 5s ease-in 1;
}
当然，这个动画在这个类被渲染的任何时候都会发生，包括在加载时。
我对执行此操作的“Angular 2 方式”感兴趣。
【问题讨论】：
标签： javascript css angular animation angularfire2
从 Angular 4.25 开始，有一种更简单的方法可以做到这一点：如果你想在视图初始化时抑制 :enter 动画，只需用以下动画包装它：
template: `
<div [@preventInitialChildAnimations]>
<div [@someAnimation]>...</div>
</div>
`,
animations: [
trigger('preventInitialChildAnimations', [
transition(':enter', [
query(':enter', [], {optional: true})
])
]),
...
]
【讨论】：
[@someAnimation.done] 仍被触发，导致此解决方案无法使用。
最简单的解决方案：
@Component({
selector: 'myComponent',
template: '<div [@.disabled]="disableAnimations" [@someAnimation]="someValue">',
animations: [trigger('someAnimation', [transition('* => *', [style({ transform: 'scale(1.1)' }), animate(250)])])]
})
export class MyComponent implements AfterViewInit {
disableAnimations: boolean = true;
constructor() {}
ngAfterViewInit(): void {
this.disableAnimations = false;
}
}
参考： https://angular.io/api/animations/trigger （滚动到“禁用动画”）
【讨论】：
添加一个触发器，用于检查项目通过网络时的状态。这里我在itemState 为new 时触发动画。
trigger('itemState', [
transition('* => new', animate(5000, keyframes([
style({ backgroundColor: 'red', offset: 0 }),
style({ backgroundColor: '*', offset: 1.0 })
]))),为您的触发器提供对项目状态的引用，并在动画结束时将其设置为 null。
<div [@itemState]="someItem.itemState" (@itemState.done)="someItem.itemState=''">请务必在您的帖子中添加itemState 属性，以便您可以将它们标记为新帖子！
【讨论】：
(@itemState.done)="someApiCall() 将项目状态设置为 null 或 @987654328 @ 在 API 级别以及在本地将其设置为 old 或 null。
itemState 属性设置 new 标志。
您可以使用生命周期挂钩 AfterViewInit 在初始视图渲染完成后激活动画。
https://embed.plnkr.co/5l1kf5lMLEXSE8pNzqik/
@Component({
selector: 'my-app',
template: `
<div *ngFor="let item of items" [@greenFade]="animate ? 'in' : null">
{{item}}
</div>
<button (click)="addItem()">add</button>
`,
animations: [
trigger('greenFade', [
transition('void => in', [style({background: 'rgb(173, 235, 173)'}), animate('5s ease-in')])
])
]
})
class App implements AfterViewInit {
constructor(private cdRef: ChangeDetectorRef){}
items: String = ['Item','Item','Item'];
addItem(){
this.items.push('Item');
}
animate: boolean;
ngAfterViewInit(){
this.animate = true;
this.cdRef.detectChanges();
}
}
【讨论】：