Angular Material fade transition

Question

I followed this answer to create a routing animation for my Angular 6 + Material app, but I changed the animation to this one:

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

Here's the code in 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;
  }
}

And here's the code in 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>

Now the animation doesn't work properly. I inspected the page and it looks like it's trying to apply opacity to the component tag. I have to say that the routing happends inside a mat-card element that is centered on the page. Thanks.

Edit: Here's the project in Stackblitz: https://stackblitz.com/edit/stack-51087629

Answer 1

I fixed it with this animation:

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

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

So now the animation happens in the parent of the component, which has the css property opacity.

Here you can see it in Stackblitz: https://stackblitz.com/edit/stack-51087629-answer