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:
Скрыть DIV: <входной тип = "флажок " нг-модель = "myCheck">
<Div нг скрыть = "myCheck "> </ DIV>
</ Body>
Попробуйте »
Анимация приложения не слишком много, но надлежащее использование анимации может увеличить насыщенность страницы, или вы можете позволить пользователям более легко понять. |
Если применить название приложения был создан, вы можете поместить ngAnimate добавлены непосредственно в модели:
примеров
<H1> Скрыть DIV: <входной тип = "флажок " нг-модель = "myCheck"> </ h1>
<Div нг скрыть = "myCheck "> </ DIV>
<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:
DIV {
Переход: все линейные 0.5с;
цвет фона: Lightblue;
высота: 100px;
}
.ng скрыть {
высота: 0;
}
</ Style>
Попробуйте »
CSS Анимация
CSS анимация позволяет сгладить изменения значений CSS свойств:
примеров
В элементе DIV наборы .ng-hide
-time класс, myChange
анимация выполняется, это будет гладкая высота от 100px до 0:
@keyframes myChange {
от {
высота: 100px;
} Для {
высота: 0;
}
}
DIV {
высота: 100px;
цвет фона: Lightblue;
}
div.ng скрыть {
анимация: 0.5с myChange;
}
</ Style>
Попробуйте »