How do i use animation in Angular2 for Router Compoenents
<p>I want to animate in and out my components when the active router link changes. How do I write the code the animation code so that when the router changes, a component fades out then another fades in?</p>

<p>The code that I've been trying is the following.</p>

<pre><code>@Component({
  selector: 'app-component',
  templateUrl: './component.component.html',
  animations: [trigger(
    'openClose',
    [
      transition(":enter", [
        style({ opacity: 0 }),
        animate('2000ms', style({ opacity: 1 }))
      ]),
      transition(":leave", [
        animate('2000ms', style({ opacity: 0 }))
      ])
    ])]
})
</code></pre>

<p>But I think I got the concept wrong, as I'm trying to use that piece of code in at least 2 components but none of them is fading in or out. </p>

<p>Is this possible to do with this function or am i tackling the issue with a wrong manner?</p>