Angular. Плавный переход по страницам

Основано на реальных событиях.

Дисклеймер: что бы понять, о чем идет речь покликайте по страницам на моём сайте. Если видите анимацию, можно читать дальше. А если нет, значит я блефую :)

Первое: создаем файл с настройками анимации, например, в src/app/shared/animations/routing-animation.ts

import {animate, state, style, transition, trigger} from '@angular/animations';

export const routingAnimation = trigger('routingAnimation', [
	state('*', style({opacity: 1})),

	transition(':enter', [
		style({opacity: 0}),
		animate('300ms 150ms ease-out',
			style({opacity: 1})),
	]),

	transition(':leave', [
		style({
			display: 'block',
			position: 'absolute',
			top: 0,
			left: 0,
			right: 0,
			zIndex: 1000,
		}),
		animate('150ms ease-out',
			style({opacity: 0})),
	]),
]);

Здесь устанавливаем два типа анимаций — на появление страницы и исчезание. Абсолютное позиционирование нужно что бы новая страница не сместила старую, пока та анимируется. И по этой же причине используется задержка в 150мс, что бы страницы анимировались поочередно.

Теперь нужно убедиться, что в модуле подключен модуль для анимаций:

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
imports: [BrowserAnimationsModule],

И можно вешать анимацию на нужные страницы:

@Component({
	animations: [routingAnimation],
})
export class PageComponent implements OnInit {
	@HostBinding('@routingAnimation') private routing;

И последнее: что бы магия сработала, у анимируемых страниц должен быть указан стиль:

:host {display: block;}

Источник вдохновения: http://jasonwatmore.com/post/2017/04/19/angular-2-4-router-animation-tutorial-example