Как прописать одну анимацию для всего роутинга?

Question

[Ivan Stroykin]

Доброго времени суток,

Как можно прописать одну анимацию для всего роутинга? Чтобы не писать в каждом компоненте

import { fadeInAnimation } from '../shared/animations';

@Component({
    ...
    animations: [fadeInAnimation],
    host: {'[@fadeInAnimation]': ''}
})

Answer 1

[Ivan Stroykin]

Всё оказалось проще чем я думал. Спасибо ссылка

<div [@visibilityChanged]="visibility">
  <router-outlet></router-outlet>
</div>

@Component({
    selector: 'app-main-layout',
    templateUrl: './main-layout.component.html',
    animations: [
        trigger('visibilityChanged', [
            state('shown', style({opacity: 1, transform: 'translateY(0)'})),
            state('hidden', style({opacity: 0, transform: 'translateY(10px)'})),
            transition('hidden => shown', animate('.3s ease-out')),
        ]),
    ],
})
export class MainLayoutComponent {

    visibility: string = 'hidden';

    constructor(private router: Router) {
        let el = this;
        router.events.subscribe(event => {
            if (event instanceof NavigationStart)
                if (event.url != router.url)
                    el.visibility = 'hidden';
            if (event instanceof NavigationEnd)
                setTimeout(() => el.visibility = 'shown', 10);
        });
    }

}