我有一个列表,其中的项目有这样的动画:
<li @animation>
这是我的动画触发器:
trigger('animation', [
transition(':enter', [
style({ height: '0px', 'padding-top': '0', 'padding-bottom': '0'}), // initial
animate('0.5s',
style({ height: '*', 'padding-top': '*', 'padding-bottom': '*'})) // final
]),
transition(':leave', [
style({ height: '*', 'padding-top': '*', 'padding-bottom': '*', opacity: 1}), // initial
animate('0.5s',
style({ height: '0px', 'padding-top': '0', 'padding-bottom': '0', opacity: 0})) // final
])
])
如何为特定项目有条件地打开/关闭此动画?其实我在找......像这样:
<li [@animation]=item.isAnimated>
这根本不起作用。
不幸的是,Angular文档只有一句话:
对于进入或离开页面的元素(插入或从DOM中删除),您可以使动画成为有条件的。例如,在HTML模板中使用* ngIf和动画触发器。
但是当我将动画注释与* ngIf结合使用时,显然不会显示未设置动画的项目:
<li *ngIf="item.isAnimated" @animation>
无论isAnimated标志如何,我都希望进一步显示所有项目。我只想打开/关闭特定项目的动画。
据Angular IO说:
如果为true,则绑定@ .disabled绑定的特殊动画控件会阻止渲染所有动画。将@ .disabled绑定放在元素上以禁用元素本身的动画,以及元素中的任何内部动画触发器。
以下示例显示如何使用此功能:
@Component({
selector: 'my-component',
template: `
<div [@.disabled]="isDisabled">
<div [@childAnimation]="exp"></div>
</div>
`,
animations: [
trigger("childAnimation", [
// ...
])
]
})
class MyComponent {
isDisabled = true;
exp = '...';
}
当@ .disabled为true时,它会阻止@childAnimation触发器与任何内部动画一起动画。
澄清:Angulars:输入和:leave关键字是在进入或离开dom时为组件设置动画。听起来很简单,但这正是您的方法和您尝试实现的目标的问题。而不仅仅是动画,如果dom中有一个新元素你想要它更加自定义,那么你需要自己的状态,你可以在列表条目的ngOnInit和ngOnDestroy中自己控制。
方法可能如下:
@Component({
animations: [
trigger('animation', [
state('invisible', style({ height: '0px', 'padding-top': '0', 'padding-bottom': '0'}),
state('visible', style({ height: '*', 'padding-top': '*', 'padding-bottom': '*'})
transition('invisible => visible', animate('0.5s'))
transition('visible => invisible', animate('0.5s'))
])
],
})
private readonly isAnimated: boolean = false/true //Where ever you get this value.
public animationState: string //Or Enum with visible/invisible.
public ngOnInit(): void {
if (this.isAnimated) {
animationState = 'visible'
}
}
public ngOnDestroy(): void {
if (this.isAnimated && this.animationState === 'visible') {
animationState = 'invisible'
}
}
<li [@animation]="animationState"/>
如果这种方法还有任何问题或问题 - 请告诉我们,我们可以进行调整和讨论。