Najlepszy samouczek angularjs Animacja W 2024 r. W tym samouczku możesz dowiedzieć się Czym jest animacja?,ngAnimate zrobić?,Korzystanie animacji CSS,CSS Transitions,CSS Animacja,
Angularjs zapewnia animację, można korzystać z CSS.
Angularjs animacja trzeba wprowadzić bibliotekę kątowe-animate.min.js.
<script src="http://cdn.static.w3write.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
Należy go stosować w modelu zastosowanie ngAnimate:
<body ng-app="ngAnimate">
Animacja jest dynamiczne efekty poprzez zmianę elementu HTML wyprodukowane.
Zaznacz pole wyboru, aby ukryć DIV:
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:
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) 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 umożliwia nam sprawne przejście do wartości nieruchomości CSS zmieniona na inną:
W zestawach elementu div .ng-hide
klasę, przejście trwa 0,5 sekundy, wysokość od 100px do 0:
animacje CSS pozwala wygładzić zmodyfikować wartości właściwości CSS:
W elemencie DIV ustawia .ng-hide
-Czas klasę myChange
animacja jest wykonywana, to będzie gładka wysokość od 100px do 0: