Latest web development tutorials

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:

<Body ng-app = "ngAnimate ">

Ukryj DIV: <input type = "checkbox " ng model = "myCheck">

<Div ng-hide = "myCheck "> </ div>

</ Body>

Spróbuj »
uwaga 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

<Body ng-app = "myApp ">

<H1> Ukryj DIV: <input type = "checkbox " ng model = "myCheck"> </ h1>

<Div ng-hide = "myCheck "> </ div>

<Script>
var app = angular.module ( "myApp ' , [' ngAnimate ']);
</ 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:

<Style>
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:

<Style>
@keyframes myChange {
z {
height: 100px;
} Aby {
Wysokość: 0;
}
}
div {
height: 100px;
background-color: jasnoniebieski;
}
div.ng-hide {
Animacja: 0.5s myChange;
}
</ Style>

Spróbuj »