MatDialog 内的动画不起作用

Question

我有 component/dialog 个动态 add/remove 组件。我也确实在 enter/leave 上有动画，所以当组件被删除并添加新组件时，我想为滑入滑出设置动画。但是 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

Answer 1

我使用 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();

问题是 angular 动画没有播放子动画，因为 angular material 有动画到 fadein/out 模态我的模态内部的动画触发器不工作。

MatDialog 内的动画不起作用

Animation inside of MatDialog is not working

angular-material2

angular