Анимация внутри MatDialog не работает - PullRequest
Новая
       9

Анимация внутри MatDialog не работает

0 голосов
/ 05 октября 2018

У меня есть компонент / диалог, в котором я собираюсь динамически добавлять / удалять компоненты.Также у меня есть анимация при входе / выходе, поэтому, когда компонент удален и добавлен новый компонент, я хочу анимировать слайд в слайде.Но внутри 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

1 Ответ

0 голосов
/ 08 октября 2018

Я решил свою проблему с помощью 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();

Проблема заключается в том, что угловая анимация не воспроизводит вспомогательную анимацию, и поскольку угловой материал имеет анимациюв модале fadein / out мои триггеры анимации внутри модальных не работают.

...