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="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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-show -
ng-hide -
ng-class -
ng-view -
ng-include -
ng-repeat -
ng-if -
ng-switch
ng-show и ng-hide директивы добавляет или удаляет ng-hide значение класса.
Остальные директивы добавляет ng-enter значение класса , когда они входят в DOM, и ng-leave атрибут , когда они удаляются из DOM.
ng-repeat директива также добавляет ng-move значение класса , когда HTML элемент меняет положение.
Кроме того, во время анимации, HTML элемент будет иметь множество значений класса, которые будут удалены , когда анимация завершена. Пример: ng-hide директиву добавит эти значения класса:
-
ng-animate -
ng-hide-animate -
ng-hide-add(если элемент будет скрыт) -
ng-hide-remove(если элемент будет показан) -
ng-hide-add-active(если элемент будет скрыт) -
ng-hide-remove-active(если элемент будет показан)
Анимации с помощью CSS
Мы можем использовать CSS переходы или CSS-анимации для анимации HTML-элементов. Этот учебник покажет вам обоим.
Чтобы узнать больше о CSS анимации, изучить наш CSS Переход Учебник и наш CSS анимации Учебник .
CSS Transitions
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 Animations
CSS Animations позволяет изменять значения 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>
Попробуй сам "