Анимации AngularJS
AngularJS предоставляет анимированные переходы с помощью CSS.
Что такое анимация?
Анимация — это когда преобразование HTML-элемента создает иллюзию движения.
Пример:
Установите флажок, чтобы скрыть DIV:
<body ng-app="ngAnimate">
Hide the DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
Приложения не должны быть наполнены анимацией, но некоторые анимации могут сделать приложение более понятным.
Что мне нужно?
Чтобы ваши приложения были готовы к анимации, вы должны включить библиотеку AngularJS Animate:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
Затем вы должны обратиться к ngAnimateмодулю в вашем приложении:
<body ng-app="ngAnimate">
Или, если у вашего приложения есть имя, добавьте ngAnimateв качестве зависимости в свой модуль приложения:
Пример
<body ng-app="myApp">
<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
var app =
angular.module('myApp', ['ngAnimate']);
</script>
Что делает ngAnimate?
Модуль ngAnimate добавляет и удаляет классы.
Модуль ngAnimate не анимирует ваши HTML-элементы, но когда ngAnimate замечает определенные события, такие как скрытие или отображение HTML-элемента, элемент получает некоторые предопределенные классы, которые можно использовать для создания анимации.
Директивы в AngularJS, которые добавляют/удаляют классы:
ng-showng-hideng-classng-viewng-includeng-repeatng-ifng-switch
Директивы ng-showи ng-hideдобавляют или удаляют ng-hideзначение класса.
Другие директивы добавляют ng-enterзначение класса, когда они входят в DOM, и ng-leaveатрибут, когда они удаляются из DOM.
Директива ng-repeatтакже добавляет ng-moveзначение класса, когда элемент HTML меняет позицию.
Кроме того, во время анимации элемент HTML будет иметь набор значений класса, которые будут удалены после завершения анимации. Пример:
ng-hideдиректива добавит следующие значения класса:
ng-animateng-hide-animateng-hide-add(если элемент будет скрыт)ng-hide-remove(если элемент будет показан)ng-hide-add-active(если элемент будет скрыт)ng-hide-remove-active(если элемент будет показан)
Анимации с использованием CSS
Мы можем использовать переходы CSS или анимацию CSS для анимации элементов HTML. Этот урок покажет вам оба.
Чтобы узнать больше об CSS-анимации, изучите наш учебник по CSS-переходам и наш учебник по CSS-анимации .
CSS-переходы
Переходы CSS позволяют плавно изменять значения свойств CSS, от одного значения к другому, в течение заданного времени:
Пример:
Когда элемент DIV получит .ng-hideкласс, переход займет 0,5 секунды, а высота плавно изменится от 100px до 0:
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide
{
height: 0;
}
</style>
CSS-анимации
CSS-анимации позволяют плавно изменять значения свойств CSS, от одного значения к другому, в течение заданного времени:
Пример:
Когда элемент DIV получит .ng-hideкласс, myChange
запустится анимация, которая плавно изменит высоту от 100px до 0:
<style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>