Latest web development tutorials

AngularJS Анимация

AngularJS обеспечивает анимацию, вы можете использовать с помощью CSS.

AngularJS анимации необходимо ввести библиотеку угловых animate.min.js.

<script src="http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>

Она должна быть использована в модели приложения ngAnimate:

<body ng-app="ngAnimate">

Что такое анимация?

Анимация динамических эффектов путем изменения элемента HTML производится.

примеров

Установите флажок, чтобы скрыть DIV:

<Тело нг-приложение = "ngAnimate ">

Скрыть DIV: <входной тип = "флажок " нг-модель = "myCheck">

<Div нг скрыть = "myCheck "> </ DIV>

</ Body>

Попробуйте »
примечание Анимация приложения не слишком много, но надлежащее использование анимации может увеличить насыщенность страницы, или вы можете позволить пользователям более легко понять.

Если применить название приложения был создан, вы можете поместить ngAnimate добавлены непосредственно в модели:

примеров

<Тело нг-приложение = "MyApp ">

<H1> Скрыть DIV: <входной тип = "флажок " нг-модель = "myCheck"> </ h1>

<Div нг скрыть = "myCheck "> </ DIV>

<Script>
вар приложение = angular.module ( 'MYAPP' , [ 'ngAnimate']);
</ Script>

Попробуйте »

ngAnimate сделано?

ngAnimate модель может добавить или удалить класс.

ngAnimate модель не одушевленные HTML элементы, но 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 значение класса.

Другие инструкции будут добавлены в DOM ng-enter класс, удалить DOM добавит ng-leave свойство.

При изменении позиции элемента HTML, ng-repeat команда также может добавить ng-move типа.

Кроме того, после завершения, коллекция класс 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 Transitions

CSS позволяет нам плавный переход к значению CSS-свойства изменен на другой:

примеров

В наборах элементов DIV .ng-hide класс, переход занимает 0,5 секунды, высота от 100px до 0:

<Style>
DIV {
Переход: все линейные 0.5с;
цвет фона: Lightblue;
высота: 100px;
}
.ng скрыть {
высота: 0;
}
</ Style>

Попробуйте »

CSS Анимация

CSS анимация позволяет сгладить изменения значений CSS свойств:

примеров

В элементе DIV наборы .ng-hide -time класс, myChange анимация выполняется, это будет гладкая высота от 100px до 0:

<Style>
@keyframes myChange {
от {
высота: 100px;
} Для {
высота: 0;
}
}
DIV {
высота: 100px;
цвет фона: Lightblue;
}
div.ng скрыть {
анимация: 0.5с myChange;
}
</ Style>

Попробуйте »