Угловой материал затухания перехода

Question

Я следовал этому ответу , чтобы создать анимацию маршрутизации для моего приложения Angular 6 + Material, но я изменил анимацию на эту:

const fade = [
// route 'enter' transition
  transition(':enter', [
    // css styles at start of transition
    style({ opacity: 0 }),
    // animation and styles at end of transition
    animate('.3s', style({ opacity: 1 }))
  ])
];

Вот код в app.component.ts:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('routerAnimations', [
      transition('* => *', fade)
    ])
  ]
})
export class AppComponent {
  prepareRouteTransition(outlet) {
    const animation = outlet.activatedRouteData['animation'] || {};
    return animation['value'] || null;
  }
}

А вот код в app.component.html:

<div layout-fill layout="column" layout-align="center none">
  <div class="main-div">
      <mat-card class="z-depth center" flex="50">
        <div class="content page" [@routerAnimations]="prepareRouteTransition(outlet)">
          <router-outlet #outlet="outlet"></router-outlet>
        </div>
      </mat-card>
  </div>
</div>

Теперь анимация не работает должным образом. Я проверил страницу, и похоже, что она пытается применить прозрачность к тегу компонента. Я должен сказать, что маршрутизация происходит внутри элемента mat-card, который центрирован на странице. Спасибо.

Редактировать: Вот проект в Stackblitz: https://stackblitz.com/edit/stack-51087629

Answer 1

Я исправил это с помощью этой анимации:

const fade = [
  query(':self', 
    [
      style({ opacity: 0 })
    ], 
    { optional: true }
  ),

  query(':self',
    [
      style({ opacity: 0 }),
      animate('.3s', style({ opacity: 1 }))
    ], 
    { optional: true }
  )
];

Так что теперь анимация происходит в родительском компоненте, который имеет свойство css opacity.

Здесь вы можете увидеть это в Stackblitz: https://stackblitz.com/edit/stack-51087629-answer