AngularJS — это многофункциональная инфраструктура для создания одностраничных веб-приложений, предоставляющая все возможности, необходимые для создания многофункциональных и интерактивных приложений. Одна из ключевых особенностей, которую приносит Angular, — поддержка анимации .
Мы можем анимировать часть приложения, чтобы указать происходящее изменение. В моей последней статье я рассмотрел поддержку CSS-анимации в приложениях Angular. В этой статье мы увидим, как использовать JavaScript для анимации приложений AngularJS.
В Angular единственное отличие анимаций CSS и JavaScript заключается в их определении. Нет разницы в том, как используются определенные анимации. Для начала нам нужно загрузить модуль ngAnimate в корневой модуль нашего приложения.
angular.module('coursesApp', ['ngAnimate']);
События анимации, которые будут обрабатываться в анимации JavaScript, также остаются прежними. Ниже приведен список директив, поддерживающих анимации и их события для различных действий:
| Директивы | События |
|---|---|
| нг-просмотр нг-включают нг-переключатель нг-если |
войти уехать |
| нг-повтор | войти уехать переехать |
| нг-шоу нг скрыть нг-класс |
добавлять удалять |
Приведенный выше листинг такой же, как и в предыдущей статье, но в нем не упоминаются соответствующие классы CSS, поскольку они не нужны для определения анимации JavaScript. Эти события генерируются, только если модуль приложения загружает модуль ngAnimate . Теперь давайте посмотрим, как оживить некоторые из директив.
Синтаксис для пользовательской угловой анимации
Базовый скелет пользовательской анимации JavaScript выглядит следующим образом:
angular.module('coursesApp').animation('.name-of-animation', function(<injectables>) { return { event: function(elem, done){ //logic of animation done(); } }; });
Вот несколько вещей, о которых следует помнить при написании JavaScript-анимации в AngularJS:
- Название анимации начинается с точки (.)
- Каждое анимационное действие принимает два параметра:
- Объект, который является текущим элементом DOM, к которому будет применена анимация. Это либо объект jQlite, если jQuery не загружается перед загрузкой AngularJS. В противном случае это объект jQuery.
- Функция обратного вызова, которая вызывается после завершения анимации. Действие директивы останавливается до тех пор, пока не будет вызвана функция done.
У нас есть ряд библиотек JavaScript, таких как jQuery , Greensock , Anima и несколько других, которые облегчают работу по созданию анимации. Для простоты я использую jQuery для создания анимации в этой статье. Чтобы узнать о других библиотеках, вы можете посетить их соответствующие сайты.
Анимация ng-view
Анимация, применяемая к директиве ng-view происходит, когда пользователь переключается между представлениями приложения AngularJS. Как указано в таблице выше, мы можем анимировать, когда представление входит или выходит. Нет необходимости рассматривать оба этих случая; мы можем оживить то, что кажется необходимым.
Ниже приводится анимация, которая вызывает некоторый визуальный эффект при входе в представление:
courseAppAnimations.animation('.view-slide-in', function () { return { enter: function(element, done) { element.css({ opacity: 0.5, position: "relative", top: "10px", left: "20px" }) .animate({ top: 0, left: 0, opacity: 1 }, 1000, done); } }; });
Вышеприведенное создает эффект скольжения, когда представление попадает на страницу. done метод передается как обратный вызов. Это означает, что анимация завершена, и теперь фреймворк может перейти к следующему действию.
Обратите внимание на способ animate() метода animate() . Нам не нужно было преобразовывать элемент в объект jQuery, поскольку библиотека jQuery загружается перед загрузкой AngularJS.
Теперь нам нужно применить эту анимацию к директиве ng-view . Хотя анимация определена в JavaScript, условно мы применяем ее, используя класс в директиве target.
<div ng-view class="view-slide-in"></div>
Анимация ng-repeat
ng-repeat является одной из самых важных директив, с несколькими доступными опциями. Двумя основными операциями директивы являются фильтрация и сортировка. Элементы в соответствии с директивой добавляются, удаляются или перемещаются в зависимости от типа выполняемого действия.
Давайте применим некоторые основные анимации, чтобы можно было видеть, когда происходят изменения.
courseAppAnimations.animation('.repeat-animation', function () { return { enter : function(element, done) { console.log("entering..."); var width = element.width(); element.css({ position: 'relative', left: -10, opacity: 0 }); element.animate({ left: 0, opacity: 1 }, done); }, leave : function(element, done) { element.css({ position: 'relative', left: 0, opacity: 1 }); element.animate({ left: -10, opacity: 0 }, done); }, move : function(element, done) { element.css({ left: "2px", opacity: 0.5 }); element.animate({ left: "0px", opacity: 1 }, done); } }; });
Анимация ng-hide
Директива ng-hide добавляет или удаляет CSS-класс ng-hide для целевого элемента. Чтобы применить анимацию, нам нужно обработать случаи добавления и удаления класса CSS. Имя класса передается в класс обработчика анимации. Это позволяет нам проверять класс и предпринимать соответствующие действия.
Ниже приведен пример кода анимации, который затухает или затухает в элементе при активации или деактивации директивы ng-hide :
courseAppAnimations.animation('.hide-animation', function () { return { beforeAddClass : function(element, className, done) { if (className === 'ng-hide') { element.animate({ opacity: 0 },500, done); } else { done(); } }, removeClass : function(element, className, done) { if (className === 'ng-hide') { element.css('opacity',0); element.animate({ opacity: 1 }, 500, done); } else { done(); } } }; });
Анимация пользовательской директивы
Чтобы анимировать пользовательскую директиву, нам нужно использовать сервис $animate . Хотя $animate является частью базовой структуры AngularJS, ngAnimate следует загрузить, чтобы наилучшим образом использовать сервис.
Используя ту же демонстрацию, что и в предыдущей статье , мы представляем страницу со списком курсов. Мы создаем директиву, чтобы показать детали курса в блоке, и содержимое блока будет меняться после нажатия на ссылку «Просмотр статистики». Давайте добавим анимацию, чтобы сделать переход видимым для пользователя.
Мы добавим класс CSS, когда произойдет переход, и удалим класс, когда анимация будет завершена. Ниже приведен код этой директивы:
app.directive('courseDetails', function ($animate) { return { scope: true, templateUrl: 'courseDetails.html', link: function (scope, elem, attrs) { scope.viewDetails = true; elem.find('button').bind('click', function () { $animate.addClass(elem, "switching", function () { elem.removeClass("switching"); scope.viewDetails =! scope.viewDetails; scope.$apply(); }); }); } }; });
Как видите, мы выполняем действие после завершения анимации. Изучив элемент директивы в инструментах разработчика браузера, мы увидим, что классы switching-active и switching-add добавляются и удаляются очень быстро. Мы можем определить переход CSS или пользовательскую анимацию JavaScript, чтобы увидеть, как происходит анимация. Ниже приведен пример CSS-перехода, который можно использовать с вышеуказанной директивой, префиксы поставщиков для краткости опущены:
.det-anim.switching { transition: all 1s linear; position: relative; opacity: 0.5; left: -20px; }
Кроме того, вот анимация jQuery для использования с той же директивой:
courseAppAnimations.animation('.js-anim', function () { return { beforeAddClass: function(element, className, done) { if (className === 'switching') { element.animate({ opacity: 0 },1000, function (){ element.css({ opacity: 1 }); done(); }); } else { done(); } } } });
Одна из этих анимаций может быть применена к пользовательской директиве так же, как мы применили анимацию к встроенным директивам.
<div course-details class="det-anim" title="{{course.title}}"> </div>
Вы можете увидеть все вышеперечисленные анимации в действии на демонстрационной странице .
Вывод
Анимации при правильном и функциональном использовании оживляют приложения. Как мы уже видели, AngularJS имеет богатую поддержку анимации CSS и JavaScript. Вы можете выбрать один из них в зависимости от обстоятельств вашей команды.
Но использование большого количества анимаций может привести к замедлению работы приложения, и приложение может показаться чрезмерно разработанным для конечного пользователя. Таким образом, это оружие должно использоваться осторожно и оптимально.