Заказать проект
Оставьте заявку для получения коммерческого предложения.
Заполните форму и мы вышлем Вам предложение в котором решим,
чем можем вам помочь.
Анимация постраничного перехода в Angular 2/5

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

15 Июня 2018
Николай Гоцалюк
Front End Developer
Николай  Гоцалюк
следующая статья

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

Немного об ингредиентах нашего рецепта демо-проекта

В основном компоненте у нас есть небольшая навигация и routing-outlet для организации вывода страниц.

И плюс два компонента с контентом которые будут служить нам страницами.

Для начала нам потребуется модуль BrowserAnimationsModule -- 1шт.
Подключим его в файле app.module.ts.


Не стоит забывать, что для корректной работы в браузерах, которые не поддерживают Web Animations API, нужен полифил  web-animations.

Для этого, в консоле проекта пропишем: npm install --save web-animations-js и в файле 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 за содействие при написании статьи.



  
Записаться На Консультацию
Записаться На Консультацию
Мы свяжемся
с вами
в течении
10 минут
laptop
Мы свяжемся с вами в течении 10 минут