AngularJS предназначен для создания полнофункциональных приложений, связанных с данными, в Интернете. Добавление анимации в эти приложения похоже на то, как если бы у вас была любимая пицца с начинками. Анимации не только добавляют красоту пользовательскому интерфейсу, но и делают его более удобным для пользователя. Небольшая анимация в приложении может поднять его богатство до уровня, который в противном случае очень трудно достичь.
Благодаря мощным возможностям Интернета в наши дни есть несколько способов создания анимации. До недавнего времени анимация была возможна только с помощью JavaScript. Но теперь, когда у нас есть CSS3, хорошо поддерживаемый всеми основными браузерами, мы можем анимировать наши сайты только с помощью CSS.
Анимации были поддержаны в AngularJS в бета-версии 1.1.5. Он претерпел ряд изменений, прежде чем стабильная версия функции была выпущена в AngularJS 1.2. Поддержка анимации в приложении Angular может быть добавлена или удалена очень легко. Библиотека обеспечивает очень хорошую поддержку анимаций на основе CSS и JavaScript. Хотя анимация может быть написана на JavaScript, рекомендуется использовать CSS-анимацию. Это потому, что CSS-анимации обрабатываются браузером с низким приоритетом и не блокируют поток обработки, когда поток может делать что-то важное.
В этой статье мы увидим, как можно использовать CSS-анимацию, чтобы сделать поведение встроенных директив AngularJS привлекательным. Рассмотрение возможностей анимации, поддерживаемых в CSS, выходит за рамки этой статьи. Вы можете обратиться к каналу CSS на SitePoint, чтобы узнать больше.
Начиная
Чтобы использовать анимацию, нам нужно включить библиотеку angular-animate.js и добавить модуль ngAnimate в качестве зависимости в модуль, как показано ниже.
angular.module('coursesApp', ['ngAnimate']); Библиотека добавляет поддержку анимации в следующие директивы для указанных событий:
| Директивы | События |
|---|---|
| нг-просмотр нг-включают нг-переключатель нг-если |
войти уехать |
| нг-повтор | войти уехать переехать |
| нг-шоу нг скрыть нг-класс |
добавлять удалять |
Эти события генерируются автоматически при любых изменениях в состоянии директив. Важно помнить, что эти события генерируются только тогда, когда модуль ngAnimate передается как зависимость в модуль приложения. Когда эти события запускаются, они добавляют классы CSS в примененный элемент. Соответствующие имена классов CSS упомянуты в таблице выше. Как вы можете видеть, нам предоставлена свобода определять поведение, когда событие происходит, а также после того, как событие произошло.
Анимация ng-view
Когда пользователь переходит от одного представления к другому, маршрутизация разрешается на стороне клиента, и часть страницы загружается новым содержимым. Это происходит очень быстро, и иногда пользователь может чувствовать, что изменение в представлении слишком спонтанно. Анимация на этом этапе сделает переход более плавным.
Обращаясь к приведенной выше таблице, мы видим, что ng-view вызывает два события, когда представление меняется. Давайте применим следующий стиль, когда вид меняется.
.view-slide-in.ng-enter { transition: all 1s ease; -webkit-transition:all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; opacity:0.5; position:relative; opacity:0; top:10px; left:20px; }направо.view-slide-in.ng-enter { transition: all 1s ease; -webkit-transition:all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; opacity:0.5; position:relative; opacity:0; top:10px; left:20px; }
Вышеупомянутый CSS применяет простой переход к примененному элементу с продолжительностью перехода 1 секунда. Но только вышеперечисленные стили не имеют никакого эффекта, так как мы не сказали, какое свойство элемента будет изменено во время перехода. Давайте манипулируем значениями некоторых свойств CSS:
.view-slide-in.ng-enter { opacity: 0; } .view-slide-in.ng-enter.ng-enter-active { top:0; left:0; opacity: 1; } .view-slide-in.ng-leave.ng-leave-active{ top:5px; left:5px; opacity:1; } .view-slide-in.ng-leave{ top:0; left:0; opacity:0; }направо.view-slide-in.ng-enter { opacity: 0; } .view-slide-in.ng-enter.ng-enter-active { top:0; left:0; opacity: 1; } .view-slide-in.ng-leave.ng-leave-active{ top:5px; left:5px; opacity:1; } .view-slide-in.ng-leave{ top:0; left:0; opacity:0; }направо.view-slide-in.ng-enter { opacity: 0; } .view-slide-in.ng-enter.ng-enter-active { top:0; left:0; opacity: 1; } .view-slide-in.ng-leave.ng-leave-active{ top:5px; left:5px; opacity:1; } .view-slide-in.ng-leave{ top:0; left:0; opacity:0; }направо.view-slide-in.ng-enter { opacity: 0; } .view-slide-in.ng-enter.ng-enter-active { top:0; left:0; opacity: 1; } .view-slide-in.ng-leave.ng-leave-active{ top:5px; left:5px; opacity:1; } .view-slide-in.ng-leave{ top:0; left:0; opacity:0; }
Теперь все, что нам нужно сделать, это применить класс view-fade к директиве ng-view .
<div ng-view class="view-slide-in"> </div>
Теперь вы сможете увидеть эффект слайда при переходе от одного вида к другому. Вы можете применить любой переход или даже определить свою собственную ключевую анимацию. Вы можете поиграть с переходами вида в демо, чтобы получить лучшее представление.
Анимация ng-repeat
Практически невозможно избежать ng-repeat в приложении AngularJS. В итоге мы используем большинство возможностей директивы, таких как обновление модели, добавление элементов или удаление элементов из коллекции, применение сортировки и фильтрации в элементах. Элементы в директиве продолжают двигаться и изменяться, когда мы выполняем эти операции.
Давайте применим линейный переход к непрозрачности элементов, чтобы увидеть изменения элементов.
.repeat-animation.ng-enter, .repeat-animation.ng-leave, .repeat-animation.ng-move { -webkit-transition: all linear 1s; -moz-transition: all linear 1s; -o-transition: all linear 1s; transition: all linear 1s; position:relative; left:5px; } .repeat-animation.ng-enter { opacity: 0; } .repeat-animation.ng-enter.ng-enter-active { opacity: 1; } .repeat-animation.ng-leave { opacity: 1; } .repeat-animation.ng-leave.ng-leave-active { opacity: 0; } .repeat-animation.ng-move { left:2px; opacity: 0.5; } .repeat-animation.ng-move.ng-move-active { left:0; opacity: 1; }направо.repeat-animation.ng-enter, .repeat-animation.ng-leave, .repeat-animation.ng-move { -webkit-transition: all linear 1s; -moz-transition: all linear 1s; -o-transition: all linear 1s; transition: all linear 1s; position:relative; left:5px; } .repeat-animation.ng-enter { opacity: 0; } .repeat-animation.ng-enter.ng-enter-active { opacity: 1; } .repeat-animation.ng-leave { opacity: 1; } .repeat-animation.ng-leave.ng-leave-active { opacity: 0; } .repeat-animation.ng-move { left:2px; opacity: 0.5; } .repeat-animation.ng-move.ng-move-active { left:0; opacity: 1; }направо.repeat-animation.ng-enter, .repeat-animation.ng-leave, .repeat-animation.ng-move { -webkit-transition: all linear 1s; -moz-transition: all linear 1s; -o-transition: all linear 1s; transition: all linear 1s; position:relative; left:5px; } .repeat-animation.ng-enter { opacity: 0; } .repeat-animation.ng-enter.ng-enter-active { opacity: 1; } .repeat-animation.ng-leave { opacity: 1; } .repeat-animation.ng-leave.ng-leave-active { opacity: 0; } .repeat-animation.ng-move { left:2px; opacity: 0.5; } .repeat-animation.ng-move.ng-move-active { left:0; opacity: 1; }направо.repeat-animation.ng-enter, .repeat-animation.ng-leave, .repeat-animation.ng-move { -webkit-transition: all linear 1s; -moz-transition: all linear 1s; -o-transition: all linear 1s; transition: all linear 1s; position:relative; left:5px; } .repeat-animation.ng-enter { opacity: 0; } .repeat-animation.ng-enter.ng-enter-active { opacity: 1; } .repeat-animation.ng-leave { opacity: 1; } .repeat-animation.ng-leave.ng-leave-active { opacity: 0; } .repeat-animation.ng-move { left:2px; opacity: 0.5; } .repeat-animation.ng-move.ng-move-active { left:0; opacity: 1; }
Теперь, когда в списке выполняется какая-либо операция, мы увидим смесь постепенного появления и небольшого эффекта встряски на элементах. Эффект вызван изменением значения свойства left position элемента в созданных выше классах ng-move . Примените произвольную фильтрацию и сортировку к списку элементов в демонстрационной версии и наблюдайте за поведением элементов.
Анимация ng-hide
Анимация ng-hide похожа на анимацию ng-view . Единственное отличие состоит в том, что нам нужно применять классы ng-add и ng-remove вместо ng-enter и ng-leave . Давайте заставим элементы постепенно исчезать, когда они отображаются или ng-hide директивой ng-hide . Та же самая анимация может быть применена к ng-show путем обращения событий.
.hide-fade.ng-hide-add, .hide-fade.ng-hide-remove { -webkit-transition:all linear 1s; -moz-transition:all linear 1s; -o-transition:all linear 1s; transition:all linear 1s; display:block!important; } .hide-fade.ng-hide-add.ng-hide-add-active, .hide-fade.ng-hide-remove { opacity:0; } .hide-fade.ng-hide-add, .hide-fade.ng-hide-remove.ng-hide-remove-active { opacity:1; }
Посмотрите эту анимацию в действии в демоверсии . Флажок с правой стороны первой страницы скрывает или показывает некоторые элементы в повторителе.
Вывод
Поскольку возможности веб-браузеров растут с каждым днем, наши клиенты ожидают, что мы будем использовать всю мощь функций и предоставим им хороший продукт. Поддержка анимации в CSS является востребованной функцией. Гораздо проще писать и использовать анимацию с помощью CSS, чем писать несколько строк кода JavaScript, чтобы сделать то же самое. Я надеюсь, что вы нашли этот учебник полезным, и я с нетерпением жду ваших отзывов.