Последние учебники веб-разработки
 

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="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>
Попробуй сам "