[英]Animation inside of MatDialog is not working
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. 但是在MatDialog内部无法正常工作。
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渲染的任何其他地方时,它就可以工作。
<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. 在开始和完成时,我正在打印到控制台,并且那些事件被称为动画都不起作用。
I am using @angular/material 6.3.0 我正在使用@ angular / material 6.3.0
I solved my issue using Animation Builder. 我使用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)' })
)
])
]);
}
Then i can play animation 然后我可以播放动画
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. 问题在于,角度动画无法播放子动画,并且由于角度材质具有可以淡入/淡出模态的动画,所以模态内部的动画触发器不起作用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.