Анимация при смене вида в AngularJS

  • 2,408
  • 0
  • 0
  • 0
  • 2 года назад

Начиная с версии 1.2.0 AngularJS разработчики использовали анимацию при помощи классов CSS, переходов и ключевых кадров. Недавно мне довелось поработать над сайтом, который очень активно использовал анимацию при смене вида. Благодаря ngAnimate решение своей задаче я нашел очень легко.

Прежде чем начать

Если вы еще не установили модуль [ngAnimate](http:// https://docs.angularjs.org/api/ngAnimate), то сейчас самое время это сделать. В этом вам поможет сайт [angularjs.org](http:// angularjs.org), просто выберите нужную версию AngularJS и добавьте модуль как зависимость проекта.

ngAnimate

Допускается устанавливать тип перехода от вида к виду глобально на всем проекте, но так же можно указывать для каждой страницы свой тип анимации, что, как мне кажется, гораздо удобнее. Для этого всего лишь достаточно изменить класс элемента ng-view.

Самый простой способ указать тип анимации это задать нужный класс модели в контроллере. Который позднее мы можем получить из элемента ng-view.

$scope.viewClass = 'animate-home';

Затем просто выводим его как обычную переменную:

<div ng-view class="{{viewClass}}"></div>

Так как мы подключили модуль ngAnimate, при смене видов Angular автоматически будет добавлять и убирать классы. Относительно ng-view эти классы: .ng-enter, .ng-leave.

Анимация при помощи CSS

Класс .ng-leave будет добавлен элементы при выходе из вида. Мы можем ссылаться на него глобально, чтобы указать нужный вид анимации каждого вида.

.ng-leave{
 top: 0;
 -webkit-animation-duration: 0.5s;
         animation-duration: 0.5s;
 -webkit-animation-fill-mode: both;
         animation-fill-mode: both;
 -webkit-animation-name: downfromtop;
         animation-name: downfromtop;
}

@-webkit-keyframes downfromtop {
 0%{
   top: 0;
 }
 100% {
   top: 100%;
 }
}

@keyframes downfromtop {
 0%{
   top: 0;
 }
 100% {
   top: 100%;
 }
}

Такая анимации будет выводить страницу сверху вниз при навигации. Сделаем обратный эффект:

.ng-enter{
 top: 0;
 -webkit-animation-duration: 0.5s;
         animation-duration: 0.5s;
 -webkit-animation-fill-mode: both;
         animation-fill-mode: both;
 -webkit-animation-name: upfrombottom;
         animation-name: upfrombottom;
}

@-webkit-keyframes upfrombottom {
 0%{
   top: 100%;
 }
 100% {
   top: 0;
 }
}

@keyframes upfrombottom {
 0%{
   top: 100%;
 }
 100% {
   top: 0;
 }
}

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

.animate-home.ng-leave{
 /*...*/
}

Вот и все! Вы просто указываете нужные классы своему виду в контроллере.

Помните, анимация не работают на строчных элементах. Поэтому если вы применяете ng-view в качестве элемента, а не атрибута, то обязательно укажите CSS правило: display: block;

На этом возможности ngAnimate не заканчиваются. Его можно лего применить для анимации ng-repeat при добавлении, удалении или скрытии разных элементов.

Комментарии

0