Question

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

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内部渲染的元素的空白状态？

Answer 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 ¹

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

在ngFor中为组件取消动画

1 个答案: