我有一个项目列表,我正在使用自定义组件来显示它们。我希望这些项目在添加时动画显示,并在删除它们时设置动画。动画效果似乎很好,但是当我试图将它们设置为动画时,它们会立即消失。我认为这是因为动画属性位于组件中的元素上,但如果我将动画属性添加到组件元素中它也不起作用。
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
内部渲染的元素的空白状态?
答案 0 :(得分:1)
如果您尝试使用某种方法分离项目,则输入和离开动画会出现错误 (在动画有机会运行之前,组件实际上已经分离了。) 更多关于GitHub上的Bug/issue reported
因此,您需要更改以下代码:
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 引用需要|不确定。