Angularjs zapewnia animowane przejścia, z pomocą CSS.
Czym jest animacja?
Animacja jest, gdy przekształcenie elementu HTML daje iluzję ruchu.
Przykład:
Zaznacz pole wyboru, aby ukryć DIV:
<body ng-app="ngAnimate">
Hide the DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
Spróbuj sam "  | Wnioski, które nie powinny być wypełnione animacji, ale niektóre animacje mogą aplikacja łatwiejsze do zrozumienia. |
|---|
Czego potrzebuję?
Aby aplikacje gotowe do animacji, należy dołączyć bibliotekę angularjs Animacja:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
Następnie należy zapoznać się z ngAnimate modułu w aplikacji:
<body ng-app="ngAnimate"> Albo, jeśli aplikacja ma nazwę, dodać ngAnimate jako zależność w module aplikacji:
Przykład
<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> Spróbuj sam " Co robi ngAnimate zrobić?
Moduł ngAnimate dodaje i usuwa klas.
Moduł ngAnimate nie animować elementy HTML, ale kiedy ngAnimate zauważyć pewne zdarzenia, jak ukryć lub pokazać elementu HTML, element dostaje kilka predefiniowanych klas, które mogą być wykorzystywane do animacji.
Dyrektywy w angularjs którzy Dodaj / Usuń klasy są:
-
ng-show -
ng-hide -
ng-class -
ng-view -
ng-include -
ng-repeat -
ng-if -
ng-switch
ng-show i ng-hide dyrektywy dodaje lub usuwa ng-hide wartość klasy.
Pozostałe dyrektywy dodaje ng-enter wartość klasy po wprowadzeniu DOM oraz ng-leave atrybut, gdy są one usuwane z DOM.
ng-repeat dyrektywy dodaje również ng-move wartość klasy, gdy element HTML zmienia pozycję.
Ponadto, w animacji, element HTML będzie mieć zestaw wartości klas, które zostaną usunięte po zakończeniu animacji. Przykład: ng-hide dyrektywy doda te wartości klasy:
-
ng-animate -
ng-hide-animate -
ng-hide-add(jeśli element będzie ukryty) -
ng-hide-remove(jeśli element będzie widoczny) -
ng-hide-add-active(jeśli element będzie ukryty) -
ng-hide-remove-active(jeśli element będzie widoczny)
Animacje za pomocą CSS
Możemy użyć przejścia CSS lub animacje CSS do animowania elementów HTML. Ten poradnik pokaże oba.
Aby dowiedzieć się więcej na temat CSS Animation, zapoznania się z naszą CSS Transition Tutorial i nasz CSS Animation Tutorial .
CSS Transitions
Przejścia CSS pozwala na zmianę wartości właściwości CSS płynnie od jednej wartości do drugiej, w ciągu danego okresu:
Przykład:
Gdy element DIV dostaje .ng-hide klasę, przejście zajmie 0,5 sekundy, a wysokość będzie się płynnie zmieniać od 100px do 0:
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide
{
height: 0;
}
</style>
Spróbuj sam " animacje CSS
Animacje CSS pozwala na zmianę wartości właściwości CSS płynnie od jednej wartości do drugiej, w ciągu danego okresu:
Przykład:
Gdy element DIV dostaje .ng-hide klasie, myChange animacja będzie działał, które będą płynnie zmieniać wysokość od 100px do 0:
<style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>
Spróbuj sam "