MatDialog内部的动画无法正常工作 [英] Animation inside of MatDialog is not working
问题描述
我有组件/对话框,可以动态添加/删除组件. 另外,我确实在输入/离开时设置了动画,因此当删除组件并添加新组件时,我要为幻灯片中的幻灯片制作动画.但是MatDialog内部无法正常工作.
I have component/dialog where I am going dynamically add/remove components. Also I do have animation on enter/leave so when component is removed and new component added I want to animate slide in slide out. But inside of MatDialog is not working.
我以为动画存在问题,但是当我将我在对话框中显示的组件插入到用Mat Dialog渲染的任何其他地方时,它是可行的.
I thought issue is with animation but when I am inserting my component, which I am showing in dialog, to any other place which is rendered with Mat Dialog it works.
<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>
在开始和完成时,我正在打印到控制台,这些事件被称为动画无法正常工作.
on start and done i am printing to console, and those events are called even animation is not working.
我正在使用@ angular/material 6.3.0
I am using @angular/material 6.3.0
推荐答案
我使用Animation Builder解决了我的问题.
I solved my issue using Animation Builder.
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();
问题在于,角度动画无法播放子动画,并且由于角度材质具有可以淡入/淡出模态的动画,所以模态内部的动画触发器不起作用.
Problem is that angular animation is not playing sub animation and since angular material has animation to fadein/out modal my animation triggers inside of modal are not working.
这篇关于MatDialog内部的动画无法正常工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!