Реализовать эффекты анимации JavaScript в приложениях AngularJS
AngularJS-это богатый набор структур для создания одностраничных веб-приложений, обеспечивая все необходимые функции для создания богатых и интерактивных приложений. Одной из основных особенностей является то, что Angular приносит поддержку анимации.
Мы можем использовать анимацию в некоторых содержании приложения, чтобы показать, что некоторые изменения происходят. В моей последней статье я рассказал о поддержке анимации CSS в угловых приложениях. В этой статье мы увидим, как использовать сценарии JavaScript для генерации эффектов анимации в приложениях AngularJS.
В Angular единственное различие между CSS и JavaScript - это их определение. Нет никакой разницы, которая предотвращает использование определенной анимации. Во -первых, нам нужно загрузить модуль Nganimate в корневой модуль нашего приложения.
Angular.Module ('coursesApp', ['nganimate']);
Все события анимации JavaScript, которые должны быть обработаны, остаются неизменными. Вот список непосредственно поддерживаемых анимаций и их соответствующих различных поведений:
Набор событий инструкции
ng-view
ng-inplude
NG-Switch
ng-если введите
Оставлять
ng-repeat enter
Оставлять
двигаться
NG-SHOW
ng-hide
NG-класс Add
Удалять
Приведенный выше список такой же, как в предыдущей статье, но не упоминает соответствующие классы CSS, потому что нам не нужно использовать их для определения анимации JavaScript. Все эти события будут происходить только после того, как модуль применения загрузил модуль NGANIMATE. Теперь посмотрим, как заставить эти инструкции двигаться.
Синтаксис для пользовательской угловой анимации
Вот базовая структура для пользовательской анимации JavaScript:
angular.module ('coursesapp'). animation ('.. name-of-animation', function (<injectables>) {return {event: function (elem, dode) {// логика анимации dod ();}};});Вот несколько ключевых моментов, которые нужно помнить при написании анимации JavaScript в AngularJS:
1. Имя анимации начинается с точки (.)
2. Все анимационные поведения принимают два параметра:
• Объектом в элементе DOM, который собирается запустить анимацию, является либо объект JQLite, который был загружен до загрузки AngularJS, либо объект jQuery.
• Функция обратного вызова в конце анимации. Действие, соответствующее инструкции, приостанавливается до тех пор, пока не будет вызвана функция обратного вызова.
У нас есть несколько библиотек JavaScript, такие как JQUERY, Greensock, Anima и несколько других библиотек, которые позволяют легко писать анимации. Чтобы сделать это просто, я использую jQuery для создания анимации в этом посте. Чтобы выучить несколько других библиотек, вы можете посетить их соответствующие веб -сайты.
Пусть ng-view перемещается
Анимация, используемая в директивной директиве NG-View, проходит при переключении видов AngularJS.
Вот визуальный эффект, вызванный анимацией, когда появляется представление:
courseappanimations.animation ('.. View-slide-in', function () {return {enter: function (element, done) {element.css ({непрозрачность: 0,5, позиция: «относительный», сверху: «10px», слева: "20px"}) .Animate ({top: 0, слева: 0, opacity: 1}, 1000,);Вышеуказанное создает эффект скольжения, когда вид входит на экран. Метод выполнения передается как функция обратного вызова. Это должно показать, что анимация окончена, и теперь структура AngularJS может продолжаться со следующим действием.
Обратите внимание на метод, где называется метод animate (). Нам не нужно преобразовать этот элемент в объект jQuery, потому что jQuery уже загружается перед загрузкой AngularJ.
Теперь нам нужно применить этот эффект анимации к директиве NG-View. Хотя эта анимация определена в JavaScript, мы используем тег класса, чтобы применить его к целевой директиве, как это было согласовано.
анимация NG-повторения
Среди инструкций, которые вы можете использовать, NG-Repeat является очень важной командой. Существуют две другие основные инструкции по эксплуатации: фильтрация и сортировка. Добавить, перемещать или удалить соответствующие инструкции в соответствии с выполненными действиями.
Следующее демонстрирует использование некоторых основных анимаций, и когда происходят изменения, вы можете увидеть соответствующие эффекты анимации.
courseappanimations.animation ('.. repeat -animation', function () {return {enter: function (element, done) {console.log ("entering ..."); var width = element.width (); element.css ({position: 'относительно', слева: -10, opistance: 0}); element. Функция (Element, DET) {element.css ({позиция: «Относительно», слева: 0, непрозрачность: 1}); сделанный); } };});Анимация NG-Hide
Директива NG-Hide используется для добавления или удаления класса стиля NG-Hide целевого элемента. Чтобы использовать анимацию, нам часто нужно добавлять или удалить стили CSS. Передайте имя класса в класс обработки анимации, чтобы достичь этого эффекта. Это позволяет нам проверить этот класс и вносить соответствующие изменения в код.
Ниже приведен пример анимации, используя директиву NG-Hide для достижения замирания и постепенного эффекта отображения элементов:
courseappanimations.animation ('. Hide-animation', function () {return {beforeaddclass: function (element, classname, dode) {if (classname === 'ng-hide') {element.animate ({opactient: 0}, 500, выполнен);} els (classname === 'ng-hide') {element.css ('непрозрачность', 0);Пусть пользовательские команды перемещаются
Чтобы сделать пользовательские директивы оживить, нам нужно использовать услугу $ animate. Хотя услуга $ animate является частью основной структуры AngularJS, Nganimate должен быть загружен до того, как эта услуга сможет сыграть свою наибольшую роль.
Используя тот же пример из предыдущей статьи, мы представим список курсов на одном страницах. Мы создаем команду для отображения деталей курса в сетке, и контент в сетке изменится при нажатии на ссылку «Просмотр статистики». Давайте добавим анимацию, чтобы представить этот эффект преобразования пользователю.
Когда начнется анимация преобразования, мы добавим тег класса CSS и в конце концов удалите этот тег класса. Вот пример кода для этой директивы:
app.directive ('coursedetails', function ($ animate) {return {scope: true, templateurl: 'coursedetails.html', ссылка: функция (сфера, elem, attrs) {scope. () {elem.removeclass ("Switching");Как видите, мы выполняем это действие в конце анимации. В инструментах разработчика браузера, когда мы посмотрим на элементы директивы, мы обнаружим, что два тега класса, активные переключения и переключение, быстро добавляются и затем удаляются. Мы можем просмотреть эффекты анимации, определив стиль преобразования CSS или пользовательскую анимацию JavaScript. Вот простой стиль преобразования CSS, который можно использовать для вышеупомянутых инструкций. Для простоты мы удалили конкретные префиксы:
.det-anim.switching {переход: все 1s linear; позиция: относительно; непрозрачность: 0,5; слева: -20px;}Или вот анимация, написанная jQuery, которая может быть использована для той же инструкции:
courseappanimations.animation ('. js-anim', function () {return {beforeaddclass: function (element, classname, dode) {if (classname === 'Switching') {element.Animate ({opacity: 0}, 1000, function () {element.css ({opacity: 1); }}}});В этих анимациях, если это может быть применено к встроенным инструкциям, это также может применяться к пользовательским инструкциям:
<div course-details>/div>
Вы можете увидеть эффекты всех вышеперечисленных анимаций, работающих на примере страницы.
в заключение
Анимация, когда она подходит и правильно используется, принесет гнев на приложение. Как мы уже видели, AngularJS обеспечивает различную поддержку как для CSS, так и для анимаций JavaScript. Вы можете выбрать одного из них в зависимости от ситуации команды.
Тем не менее, использование слишком большого количества анимации замедлит приложение, что приложение будет выглядеть невозможным для пользователей. Поэтому вы должны быть осторожны и оптимизированы, чтобы использовать это оружие.