При правильном использовании анимация может сделать веб-приложение интересным для использования. Современные браузеры способны анимировать различные элементы на веб-странице, используя только CSS. Если вы используете AngularJS в одном из своих проектов, вы также можете использовать модуль ngAnimate, чтобы добавить к нему анимацию Angular.
Модуль ngAnimate позволяет добавлять CSS, а также анимацию на основе JavaScript в ваши проекты. Анимации на основе CSS включают ключевые кадры и переходы. Анимации на основе JavaScript должны быть зарегистрированы с помощью module.animation() . Из этого руководства вы узнаете, как добавить CSS-анимацию во встроенные директивы AngularJS с учетом анимации, чтобы сделать ваши приложения более привлекательными.
Основы
Первое, что вам нужно сделать, чтобы добавить анимацию, это включить angular-animate.js в ваш проект. После этого вы можете включить модуль ngAnimate в качестве зависимости в своем приложении, чтобы начать анимацию различных элементов.
|
1
|
angular.module(‘app’, [‘ngAnimate’]);
|
Вот список различных директив с учетом анимации и событий анимации, которые вы можете использовать для их анимации:
-
ng-repeatможет обнаруживать события входа , выхода и перемещения . -
ng-view,ng-include,ng-switchиng-ifмогут обнаруживать события входа и выхода . -
ng-show,ng-hideиng-classмогут обнаруживать события добавления и удаления . -
ng-messageтакже может обнаруживать события входа и выхода .
Вы должны помнить, что эти анимационные хуки не включены по умолчанию; они становятся активными только после того, как вы добавите модуль ngAnimate в свое приложение.
Анимация ng-if с использованием переходов CSS3
Директива ng-if в AngularJS используется для добавления или удаления элементов из DOM на основе значения данного выражения. Когда выражение оценивается как false , элемент удаляется из DOM. Когда выражение оценивается как true , клон элемента повторно вставляется в DOM. Это добавление и удаление элементов происходит мгновенно. Однако вы можете анимировать элементы, которые удаляются или воссоздаются с помощью модуля ngAnimate.
Если элементы добавляются в DOM, вы можете использовать классы ng-enter и ng-enter-active для их анимации. Код перехода, а также начальное состояние анимации добавляются в класс ng-enter . Окончательное состояние анимации добавляется в класс ng-enter-active . Вот код, который показывает некоторые красные полосы, анимируя их высоту.
|
1
2
3
4
5
6
7
8
|
.red-bar.ng-enter {
transition:all ease-in 0.25s;
height: 0px;
}
.red-bar.ng-enter.ng-enter-active {
height: 30px;
}
|
Аналогично, вы также можете применить анимацию, чтобы скрыть панели, используя классы ng-leave и ng-leave-active . Я пропустил анимацию для удаления красных полос, чтобы вы могли четко видеть разницу между анимированными и неанимированными состояниями.
Анимация ng-view с использованием переходов CSS3
Директива ng-view в AngularJS используется в качестве контейнера для перезагрузки части страницы, когда пользователь переключается между различными представлениями.
Как и добавление и удаление элементов с помощью ng-if , этот процесс также происходит очень быстро. Если вы хотите анимировать вход и выход различных элементов в представлении, вы можете использовать те же старые классы ng-enter , ng-enter-active , ng-leave и ng-leave-active .
Помимо этих четырех классов, есть также класс ng-animate . Во время анимации этот класс также добавляется ко всем элементам, которые необходимо анимировать. Вы можете использовать его для предоставления всех правил CSS, которые должны быть применимы во время анимации. Вот пример:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
|
.planet-view.ng-animate {
transition: all ease 0.4s;
position: absolute;
}
.planet-view.ng-enter {
top: 200px;
opacity: 0;
}
.planet-view.ng-leave,
.planet-view.ng-enter.ng-enter-active {
top: 0;
opacity: 1;
}
.planet-view.ng-leave.ng-leave-active {
top: -200px;
opacity: 0;
}
|
Как видно из приведенного выше кода, длительность перехода 0,4 секунды была применена ко всем свойствам. Когда информация об определенной планете поступает в вид, она начинается с непрозрачности, равной нулю, и top позиции, установленной на 200 пикселей. В то же время элементы, которые собираются покинуть вид, имеют непрозрачность 1.
К концу перехода входящие элементы достигают верхней позиции вида и становятся полностью непрозрачными. Точно так же уходящие элементы анимируются в положение 200px над видом и исчезают. Это дает нам хороший эффект, когда информация исчезает из нижней части страницы и исчезает в верхней части страницы.
В следующей демонстрации ng-view попробуйте щелкнуть по названию разных планет, чтобы увидеть анимацию enter и leave в действии.
Информация об составе атмосферы планет земной группы была взята с этой страницы .
Анимация ng-repeat Использование ключевых кадров Анимации
Директива ng-repeat в AngularJS используется для создания шаблона один раз для каждого элемента в данной коллекции. Эта директива используется, когда вы пытаетесь сортировать, фильтровать, добавлять или удалять элементы из коллекции. Есть три события анимации, которые могут быть вызваны с помощью ng-repeat .
- enter : это событие вызывается всякий раз, когда вы добавляете новый элемент в список или элемент в списке обнаруживается после применения фильтра.
- оставить : это событие срабатывает всякий раз, когда вы удаляете элемент из списка или элемент в списке отфильтровывается.
- Переместить : это событие вызывается, когда соседний элемент отфильтровывается, а соответствующий элемент необходимо переупорядочить.
В последних двух разделах вы использовали CSS-переходы для анимации различных элементов. В этом разделе вы узнаете, как анимировать различные элементы с помощью анимации ключевых кадров. Я предоставлю код для анимации перехода и ключевого кадра, чтобы вы могли увидеть разницу между ними.
Вот код перехода для анимации элементов:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
.task-item.ng-enter,
.task-item.ng-leave {
transition:all linear 0.25s;
}
.task-item.ng-leave {
top: 0;
opacity: 1;
}
.task-item.ng-leave.ng-leave-active {
top: 200px;
opacity: 0;
}
.task-item.ng-enter{
opacity:0;
top: -500px;
}
.task-item.ng-enter.ng-enter-active {
opacity:1;
top: 0px;
}
|
Как видите, этот код очень похож на код перехода, который мы использовали до этого момента. Начальные состояния определены в ng-enter и ng-leave . Конечные состояния определены в ng-enter-active и ng-leave-active .
Следующий код воссоздает тот же эффект, используя анимации ключевых кадров.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
@keyframes added {
from {
opacity: 0;
top: -500px;
}
to {
opacity: 1;
top: 0px;
}
}
@keyframes deleted {
from {
top: 0;
opacity: 1;
}
to {
top: 200px;
opacity: 0;
}
}
.task-item.ng-enter {
animation: 0.25s added;
}
.task-item.ng-leave {
animation: 0.25s deleted;
}
|
На этот раз мы используем свойство CSS animation чтобы добавить анимацию. Фактическая анимация определяется с помощью @keyframes . Начальное и конечное состояние различных элементов было определено в самих ключевых кадрах. Обратите внимание, что нам больше не нужно использовать классы ng-enter-active и ng-leave-active . Одним из преимуществ использования ключевых кадров является то, что теперь анимация может быть намного более сложной, чем простой переход.
Попробуйте добавить и удалить некоторые задачи в следующей демонстрации, чтобы увидеть анимацию в действии.
Использование ngAnimate с ngMessages
Envato Tuts + также опубликовал учебник по проверке ваших форм с помощью ngMessages . В последнем разделе этого руководства вы узнали, как отображать сообщения об ошибках только после того, как пользователь действительно коснулся поля ввода. Все сообщения об ошибках в этом руководстве появляются и исчезают мгновенно.
Если вы хотите добавить тонкую анимацию, чтобы показать или скрыть сообщения об ошибках, вы можете легко сделать это с помощью модуля ngAnimate. Как упоминалось в начале этого урока, ng-message может обнаруживать события входа и выхода . Это означает, что вы можете использовать классы ng-enter и ng-enter-active для указания начального и конечного состояния сообщений об ошибках, которые в данный момент показываются пользователям. Аналогично, вы можете использовать классы ng-leave и ng-leave-active чтобы указать начальное и конечное состояние сообщений об ошибках, которые находятся в процессе скрытия от пользователей.
Вот пример изменения свойства непрозрачности для сообщений об ошибках.
|
1
2
3
4
5
6
7
|
.error-msg.ng-enter {
transition: 0.5s linear all;
opacity: 0;
}
.error-msg.ng-enter.ng-enter-active {
opacity: 1;
}
|
Я добавил класс error-msg ко всем сообщениям об ошибках, и вы можете добавить свои собственные классы и соответственно обновить код. В этом случае я не применил анимацию сообщений об ошибках, которые стали недействительными и больше не должны показываться пользователям. Это означает, что они исчезнут мгновенно. Вот демонстрация, которая показывает, как использовать ngMessages и ngAnimate вместе.
Вывод
Из этого туториала вы узнаете, как добавить анимацию в веб-приложения AngularJS с помощью модуля ngAnimate. Вы также узнали, как применять различные анимации к элементу на основе инициирующего события. В последнем разделе рассказывается, как использовать модуль ngAnimate с другими модулями, такими как ngMessages, для добавления хорошей анимации в сообщения об ошибках.
Одна вещь, которую вы должны учитывать при использовании анимации, это то, что вы не должны злоупотреблять ими. Слишком много анимаций могут отвлечь пользователей от основной функции приложения. Используйте анимации только тогда, когда вы думаете, что они действительно могут улучшить пользовательский опыт.
Я надеюсь, вам понравился этот урок. Если у вас есть какие-либо советы, предложения или вопросы, связанные с модулем ngAnimate, оставьте комментарий.