How do i use animation in Angular2 for Router Compoenents - animation

Question

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?
The code that I've been trying is the following.
#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 }))
])
])]
})
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.
Is this possible to do with this function or am i tackling the issue with a wrong manner?

Answer 1

Example with Angular 4
Here's how I implemented a fade in animation on my home component route
import { Component } from '#angular/core';
import { fadeInAnimation } from '../_animations/index';
#Component({
moduleId: module.id.toString(),
templateUrl: 'home.component.html',
animations: [fadeInAnimation],
host: { '[#fadeInAnimation]': '' }
})
export class HomeComponent {
}
This is the animation defined in a separate file
import { trigger, state, animate, transition, style } from '#angular/animations';
export const fadeInAnimation =
trigger('fadeInAnimation', [
// route 'enter' transition
transition(':enter', [
// styles at start of transition
style({ opacity: 0 }),
// animation and styles at end of transition
animate('.3s', style({ opacity: 1 }))
]),
]);
For other animations and a live demo you can check out this post

Answer 2

Your code seems correct to me, you just need to bind the animation to a component. There are two ways:
Add it to your template, for example to a div:
<div class="container" [#openClose]="'true'">
...
</div>
Or directly apply it to your host component (<app-component>):
#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 }))
])
])],
host: {
'[#openClose]': 'true',
'style': 'display: block;'
},
})
The animation works by component, so you need to declare the animation on both of them.
The leave animation may not be noticed on state change. The official documentation has an example on how to use animations in route components
Hope it helps!