title: Angular 4 animation for fade in and out a view
body: <p>I just want the view to fade in and out on route change. I have setup the component correctly it seems but need to get the animation syntax correct I think.</p>
  
  <p><strong>This is my current animation attempt.
  I import this animation to my component:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import {trigger, state, animate, style, transition} from '@angular/animations';
  
  export function routerTransition() {
    return fadeInAndOut();
  }
  
  function fadeInAndOut() {
    return trigger('routerTransition', [
      transition(':enter', [
        style({opacity: 0}),
        animate(3000, style({opacity: 1}))
      ]),
      transition(':leave', [
        animate(3000, style({opacity: 0}))
      ])
    ]);
  }
  </code></pre>
  
  <p><strong>This is one of my components importing the transition:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component } from "@angular/core";
  import { routerTransition } from "../../animations/fade.animation";
  
  @Component({
    selector: "about-users",
    templateUrl: "./about.component.html",
    animations: [routerTransition()],
    host: { '[@routerTransition]': '' } 
  })
  
  export class AboutComponent {  
    constructor() {
    }
  }
  </code></pre>