Анімація посторінкового переходу в Angular 2/5

У багатьох розробників-початківців на Angular каменями спотикання стають лінь, страх опинитися в незнайомій ситуації і постати в дурному вигляді перед своїми колегами та анімація. А у тих, хто поборов лінь і страх, познайомився з анімацією і почав заглиблюватися в пекельну кухню складніших проектів, часто виникають питання для вирішення більш специфічних завдань.

Розглянемо рецепт приготування рішення для одного поширеного завдання, а саме — анімації посторінкового переходу.

Трохи про інгредієнти нашого рецепту демо-проекту.

В основному компоненті у нас є невелика навігація і routing-outlet для організації виведення сторінок.

І плюс два компоненти з контентом, які будуть служити нам сторінками.

Для початку нам потрібно модуль BrowserAnimationsModule - 1шт.

Під’єднаємо його в файлі app.module.ts.

Не варто забувати, що для коректної роботи в браузерах, які не підтримують Web Animations API, потрібен поліфіл web-animations.

Для цього, в консолі проекту пропишемо:npm install --save web-animations-js і в файлі polyfills.ts polyfills.ts розкоментуємо рядок:

Далі нам потрібно описати логіку роутінга. Винесемо її в окремий модуль:

 І після цього під’єднуємо його в основному модулі:

Додаємо заздалегідь приготовлену анімацію за смаком :)

Далі займемося приготуванням гарніру

Для початку трохи скоригуємо наш роутинг, щоб при переході між сторінками ми ще й передавали стан для анімації (state):

Після чого в основному компоненті app.component.ts додамо функцію для отримання цього стану getState (), а також під’єднаємо і задекларуємо нашу анімацію:

Тепер забіндимо анімацію і підв'яжу її під результат функції getState()   в основному темплейті:

На даному етапі може виникнути питання «навіщо?» Адже у нас в анімації stateChangeExpr прописаний як: '* <=> *', а це, по суті, будь-яка зміна станів. Але, як показує практика, в проектах рідко буває тільки одна анімація. Безліч різних анімацій переходів по сторінках якраз будуть засновані на станах (state). Вам потрібно буде прописувати тільки stateChangeExpr для потрібного переходу.

Розглянемо один із прикладів. Припустимо вам потрібна унікальна анімація тільки при переході з сторінки «Контакти» на сторінку «Новин». У роутинг ви будете передавати state зі значеннями «contacts» і «news» відповідно. Тоді значення stateChangeExpr в анімації для цього конкретного випадку буде 'contacts => news'.

На даному етапі у нас вже є майже готова страва::

Але ідеальна страва вимагає не тільки ідеального приготування, але і уваги до деталей.

Тому на певні об'єкти пропишемо додаткову анімацію. Нехай це будуть абзаци на сторінці Page1.

Додаємо до них клас:

Після цього дописуємо анімацію.

У 6 рядку ми описали статичну поведінку наших абзаців при переході на сторінку з ними. А в рядках 16-20 поведінку абзаців після переходу на сторінку.

У нашому рецепті ми використовували stagger(), який через встановлені проміжки часу перебере наші абзаци і застосує до них анімацію.

Хочу звернути увагу на те, що при переході на інші сторінки елементів з класом .anim може не бути. А при компіляції query(':enter .anim' видасть помилку, саме тому потрібно використовувати надбудову { optional: true }, яка ігноруватиме відсутню вибірку.

Тепер можемо милуватися суперстравою, яка у нас вийшла :)

На закінчення скажу, що на основі вищевикладеного можна створювати величезні каскади анімованих переходів на ваших проектах, де все буде залежати тільки від вашої уяви або побажань дизайнера.

Загалом, на цьому все, сподіваюся матеріал був корисний.

Bon appétit!

**На момент написання статті використовувався @ angular / cli: 1.7.3 з останньою версією Angular 5.2.9. Код також буде підтримуватися і на версіях Angular 2 і вище.

Окрема подяка Gerard Sans за сприяння при написанні статті.