title: Angular Material fade transition
body: <p>I followed <a href="https://stackoverflow.com/a/44532963/4520961">this answer</a> to create a routing animation for my Angular 6 + Material app, but I changed the animation to this one:</p>
  
  <pre><code>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 }))
    ])
  ];
  </code></pre>
  
  <p>Here's the code in <code>app.component.ts</code>:</p>
  
  <pre><code>@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    animations: [
      trigger('routerAnimations', [
        transition('* =&gt; *', fade)
      ])
    ]
  })
  export class AppComponent {
    prepareRouteTransition(outlet) {
      const animation = outlet.activatedRouteData['animation'] || {};
      return animation['value'] || null;
    }
  }
  </code></pre>
  
  <p>And here's the code in app.component.html:</p>
  
  <pre><code>&lt;div layout-fill layout="column" layout-align="center none"&gt;
    &lt;div class="main-div"&gt;
        &lt;mat-card class="z-depth center" flex="50"&gt;
          &lt;div class="content page" [@routerAnimations]="prepareRouteTransition(outlet)"&gt;
            &lt;router-outlet #outlet="outlet"&gt;&lt;/router-outlet&gt;
          &lt;/div&gt;
        &lt;/mat-card&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Edit: Here's the project in Stackblitz: <a href="https://stackblitz.com/edit/stack-51087629" rel="nofollow noreferrer">https://stackblitz.com/edit/stack-51087629</a></p>