Question

我正在Angular 2中尝试新的动画API，并遇到以下挑战：

我有一个父组件，它使用* ngFor显示一组子组件。 ngFor引用父组件中的简单数据数组。

要求：

当使用其初始子项呈现父组件时，应立即呈现父项和子项（无动画）
添加新的子组件时（由于新对象附加到数据数组中），应该为新子项设置动画（例如从左侧弹跳）。

如何配置动画来处理这个？

基本问题是：子组件如何知道它是作为其父级或更高级别的初始化的一部分呈现的？

一些可能的解决方案： - 我可以直接在数据对象上设置一个布尔变量，该对象表示新对象是在视图之后创建的，应该是动画的。组件可以检查此属性。但是，我不想在数据模型中引入这种视图逻辑。 - 我可以使用父组件中的生命周期钩子在父级中设置一个属性，该属性表示父级已呈现，并且所有后续（新）子级都应设置动画。但是，我无法执行此操作，因为似乎所有生命周期挂钩都是在实例化子组件之前执行的。

其他解决方案？

溴安德斯

Answer 1

您可以在父

protected $signature = 'email:send {user=bob}';

https://github.com/angular/angular/issues/7239#issuecomment-227369239包含一个示例（使用Plunker）：

initialLoad = true;

ngAfterViewInit() {
  this.initialLoad = false;
}

@Component({ selector: 'app', template: ` <button (click)="items.push(items.length)">Add</button> <ul> <template ngFor let-item [ngForOf]="items" let-i="index"> <li style="display: block;" @flyInOut="'in'" (click)="onClick(i)" *ngIf="!!item">{{ i }} - {{ item }}</li> </template> </ul> `, animations: [ trigger('flyInOut', [ state('in', style({ opacity: 1, transform: 'translateX(0) scaleY(1)' })), transition('void => *', [ style({ opacity: 0, transform: 'translateX(-100%)' }), animate('1s ease-in') ]), transition('* => void', [ animate('1s 10 ease-out', style({ opacity: .5, transform: 'scaleY(0.8)' })) ]) ]) ] }) export class App { private items = []; constructor() { } onClick(index) { //this.items.splice(index,1); delete this.items[index]; } }目前存在*ngFor修复问题，但问题尚未解决。

仅为新组件设置动画

1 个答案: