MatDialog 内的动画不起作用 [英] Animation inside of MatDialog is not working

问题描述

我有组件/对话框，我将在其中动态添加/删除组件.此外，我在进入/离开时确实有动画，因此当移除组件并添加新组件时，我想为滑入滑出设置动画.但是在 MatDialog 内部不起作用.

我认为问题出在动画上，但是当我将我在对话框中显示的组件插入到使用 Mat Dialog 呈现的任何其他位置时，它可以工作.

 <div [@swapComponent]="getStatus()"(@swapComponent.start)="animationStart($event)" (@swapComponent.done)="animationDone($event)"样式=显示:块"><ng-template #container></ng-模板>

</mat-dialog-content>

在开始和完成时，我正在打印到控制台，即使动画不起作用，这些事件也被称为.

我使用的是@angular/material 6.3.0

解决方案

我使用 Animation Builder 解决了我的问题.

constructor(私有animationBuilder:AnimationBuilder){this.openAnimation = this.animationBuilder.build([风格({不透明度:0，变换:'translate3d({{offsetEnterX}}%,{{offsetEnterY}}%,0)'}),团体([animate('0.8s 立方贝塞尔曲线(0,0,.2,1)', style({ opacity: 1 })),动画('0.5s 三次贝塞尔曲线(0,0,.2,1)',样式({ 变换:'translate3d(0,0,0)'}))])]);}

然后我可以播放动画

 const player = this.openAnimation.create(component.location.nativeElement,this.getStatus());player.onDone(() => {player.destroy();});播放器播放()；

问题是角度动画没有播放子动画，并且由于角度材料具有淡入/淡出模态的动画，因此我在模态内触发的动画不起作用.

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.

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.

I am using @angular/material 6.3.0

解决方案

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)' })
        )
      ])
    ]);
}

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.

这篇关于MatDialog 内的动画不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！