我有组件/对话框,我将在其中动态添加/删除组件。
另外,我确实在进入/离开时有动画,因此当删除组件并添加新组件时,我希望以动画方式滑入滑出。但 MatDialog 内部不起作用。
我认为问题出在动画上,但是当我将在对话框中显示的组件插入到使用 Mat Dialog 渲染的任何其他位置时,它可以工作。
<mat-dialog-content>
<div [@swapComponent]="getStatus()"
(@swapComponent.start)="animationStart($event)" (@swapComponent.done)="animationDone($event)"
style="display:block">
<ng-template #container>
</ng-template>
</div>
</mat-dialog-content>
在开始和完成时,我正在打印到控制台,即使动画不起作用,也会调用这些事件。
我正在使用@angular/material 6.3.0
我使用动画生成器解决了我的问题。
constructor(private animationBuilder: AnimationBuilder){
this.openAnimation = this.animationBuilder.build([
style({
opacity: 0,
transform: 'translate3d({{offsetEnterX}}%,{{offsetEnterY}}%,0)'
}),
group([
animate('0.8s cubic-bezier(0,0,.2,1)', style({ opacity: 1 })),
animate(
'0.5s cubic-bezier(0,0,.2,1)',
style({ transform: 'translate3d(0,0,0)' })
)
])
]);
}
然后我就可以播放动画了
const player = this.openAnimation.create(
component.location.nativeElement,
this.getStatus()
);
player.onDone(() => {
player.destroy();
});
player.play();
问题是角度动画没有播放子动画,并且由于角度材料具有淡入/淡出模态的动画,因此模态内部的动画触发器不起作用。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)