在ngFor中为组件取消动画

时间:2017-06-28 16:47:51

标签: javascript angular typescript animation

我有一个项目列表,我正在使用自定义组件来显示它们。我希望这些项目在添加时动画显示,并在删除它们时设置动画。动画效果似乎很好,但是当我试图将它们设置为动画时,它们会立即消失。我认为这是因为动画属性位于组件中的元素上,但如果我将动画属性添加到组件元素中它也不起作用。

animations = [
  trigger('appear', [
    state('void', style({ height: 0, opacity: 0.2 })),
    transition('void => *', animate(200, style({ height: '*', opacity: 1 }))),
    transition('* => void', animate(200)),
  ])
];

// Custom Component
@Component({
  animations,
  selector: 'bf-post',
  template: `
  <li style="overflow: hidden" [@appear] (click)="deleteItem.emit(item.id)">
    {{item.text}}
  </li>
`,
})
export class PostComponent {
  @Input() item;
  @Output() deleteItem = new EventEmitter;
}

// Using custom component, items is an array of the posts
<ul *ngIf="items.length" [class]="wallCss">
  <bf-post *ngFor="let item of items" [item]="item"
    (deleteItem)="deleteItem($event)"></bf-post>
</ul>

  deleteItem(id) {
    const idx = this.items.findIndex(item => id === item.id);
    this.items = [
      ...this.items.slice(0, idx),
      ...this.items.slice(idx + 1),
    ];
  }

每当项目添加到li时,items都会正确设置动画效果。但是,当我deleteItem删除其中一个项目时,它会立即消失。

我也试过使用<bf-post [@appear],但这根本没有动画......动画样式可能必须在li上。但 似乎在实际删除元素之前等待动画完成。

有没有办法正确动画ngFor内部渲染的元素的空白状态?

1 个答案:

答案 0 :(得分:1)

如果您尝试使用某种方法分离项目,则输入和离开动画会出现错误 (在动画有机会运行之前,组件实际上已经分离了。) 更多关于GitHub上的Bug/issue reported


您需要使用主机动画绑定来查看组件离开的动画 有关组件装饰器的Host Metadata property的更多信息

因此,您需要更改以下代码:

animations : [
  trigger('appear', [
    state('*', style({ height: 0, opacity: 0.2 })),
    transition('void => *', animate(200, style({ height: '*', opacity: 1 }))),
    transition('* => void', animate(200)),
  ])
];

// Custom Component
@Component({
  animations,
  selector: 'bf-post',
  host: { 
     '[@appear]':'true'
  }
  template: `
  <li style="overflow: hidden" (click)="deleteItem.emit(item.id)">
    {{item.text}}
  </li>
`,
})
export class PostComponent {
  @Input() item;
  @Output() deleteItem = new EventEmitter;
}
.........

省略了部分代码以避免混淆

  • 注意自定义模板中[@appear]绑定的更改 添加了一个host元数据属性。
  • 此外,您可能需要将动画中的state属性更改为*而不是void 1

<小时/> 1 引用需要|不确定。