angularjs Animacja
Angularjs zapewnia animację, można korzystać z CSS.
Angularjs animacja trzeba wprowadzić bibliotekę kątowe-animate.min.js.
<script src="http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
Należy go stosować w modelu zastosowanie ngAnimate:
<body ng-app="ngAnimate">
Czym jest animacja?
Animacja jest dynamiczne efekty poprzez zmianę elementu HTML wyprodukowane.
Przykłady
Zaznacz pole wyboru, aby ukryć DIV:
Ukryj DIV: <input type = "checkbox " ng model = "myCheck">
<Div ng-hide = "myCheck "> </ div>
</ Body>
Spróbuj »
aplikacje Animacja nie jest zbyt wiele, ale odpowiednie wykorzystanie animacji może zwiększyć bogactwo strony, czy można umożliwić użytkownikom łatwiej zrozumieć. |
Jeśli zastosujemy nazwę aplikacji została utworzona, można umieścić ngAnimate dodawane bezpośrednio w modelu:
Przykłady
<H1> Ukryj DIV: <input type = "checkbox " ng model = "myCheck"> </ h1>
<Div ng-hide = "myCheck "> </ div>
<Script>
Spróbuj »
ngAnimate zrobić?
Model ngAnimate można dodać lub usunąć klasę.
Model ngAnimate nie czyni ożywione elementy HTML, ale ngAnimate będzie monitorować zdarzenia, podobny do ukrytych elementów wyświetlania HTML, w przypadku wystąpienia zdarzenia ngAnimate użyje predefiniowanej klasy animować elementy HTML.
Angularjs dodaj / usuń instrukcję klasy:
-
ng-show
-
ng-hide
-
ng-class
-
ng-view
-
ng-include
-
ng-repeat
-
ng-if
-
ng-switch
ng-show
i ng-hide
polecenia do dodawania lub usuwania ng-hide
wartość klasy.
Inne instrukcje zostaną dodane do DOM ng-enter
klasy, usuń DOM doda ng-leave
nieruchomość.
Gdy zmienia się pozycja elementu HTML, ng-repeat
polecenia można również dodać ng-move
typu.
Ponadto, po zakończeniu, klasa zbiór elementów HTML zostaną usunięte. Na przykład: ng-hide
polecenie doda o klasie:
-
ng-animate
-
ng-hide-animate
-
ng-hide-add
(jeśli element będzie ukryty) -
ng-hide-remove
(jeśli jest wyświetlany element) -
ng-hide-add-active
(jeśli element jest ukryty) -
ng-hide-remove-active
(jeśli jest wyświetlany element)
Korzystanie animacji CSS
Możemy użyć przejścia CSS (przejście) lub animacji CSS, który animować elementy HTML, część można zobaczyć nasz poradnik przejścia CSS , Tutorial animacji CSS .
CSS Transitions
CSS umożliwia nam sprawne przejście do wartości nieruchomości CSS zmieniona na inną:
Przykłady
W zestawach elementu div .ng-hide
klasę, przejście trwa 0,5 sekundy, wysokość od 100px do 0:
div {
Przejście: wszystkie liniowe 0.5s;
background-color: jasnoniebieski;
height: 100px;
}
.ng-hide {
Wysokość: 0;
}
</ Style>
Spróbuj »
CSS Animacja
animacje CSS pozwala wygładzić zmodyfikować wartości właściwości CSS:
Przykłady
W elemencie DIV ustawia .ng-hide
-Czas klasę myChange
animacja jest wykonywana, to będzie gładka wysokość od 100px do 0:
@keyframes myChange {
z {
height: 100px;
} Aby {
Wysokość: 0;
}
}
div {
height: 100px;
background-color: jasnoniebieski;
}
div.ng-hide {
Animacja: 0.5s myChange;
}
</ Style>
Spróbuj »