Animacje AngularJS

Z pomocą CSS AngularJS oferuje przejścia animacyjne.

Co to jest animacja?

Animacja to przemiana elementów HTML, która daje wrażenie ruchu.

instancja

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 sam

Aplikacja nie powinna być pełna animacji, ale niektóre animacje mogą uczynić ją łatwiejszą do zrozumienia.

Czego potrzebuję?

Aby przygotować aplikację do animacji, musisz zawrzeć bibliotekę AngularJS Animate:

<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-animate.js"></script>

Następnie, musisz skojarzyć go z aplikacją. ngAnimate Moduł:

<body ng-app="ngAnimate">

Albo, jeśli Twoja aplikacja ma nazwę, dodaj ngAnimate Dodaj jako zależność modułu w aplikacji:

instancja

<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 sam

Co robi moduł ngAnimate?

ngAnimate moduł dodaje i usuwa klasy.

ngAnimate Moduł nie animuje Twoich elementów HTML, ale gdy ngAnimate Zauważ, że niektóre wydarzenia (np. ukrywanie lub wyświetlanie elementów HTML) dodają elementom pewne predefiniowane klasy, które można używać do tworzenia animacji.

Instrukcje dodawania/usuwania klas w AngularJS obejmują:

  • ng-show
  • ng-hide
  • ng-class
  • ng-view
  • ng-include
  • ng-repeat
  • ng-if
  • ng-switch

ng-show i ng-hide instrukcje dodają lub usuwają ng-hide Wartości klas.

inne instrukcje dodają klasy, gdy element wchodzi do DOM ng-enter klasy, które są dodawane, gdy element jest usuwany z DOM, oraz ng-leave atrybut.

Gdy element HTML zmienia pozycjęng-repeat Instrukcja dodaje również ng-move Wartości klas.

Ponadto, w trakcie animacji, element HTML będzie miał zestaw klas, które zostaną usunięte po zakończeniu animacji. Na przykład:ng-hide Instrukcje dodają te wartości klas:

  • ng-animate
  • ng-hide-animate
  • ng-hide-add(jeśli ma być ukryty element)
  • ng-hide-remove(jeśli ma być wyświetlony element)
  • ng-hide-add-active(jeśli ma być ukryty element)
  • ng-hide-remove-active(jeśli ma być wyświetlony element)

Animacja za pomocą CSS

Możemy używać CSS przejścia lub CSS animacji do dodania efektu animacji do elementów HTML. W tym tutorialu pokażemy oba.

Aby uzyskać więcej informacji o CSS animacjach, przejdź do naszych tutoriali CSS przejścia i CSS animacji.

CSS przejścia

CSS przejścia pozwalają na płynne zmienianie wartości atrybutu CSS w danym czasie trwania:

instancja

gdy DIV element uzyskuje .ng-hide W momencie, gdy jest to klasa, przejście potrwa 0.5 sekundy, wysokość będzie płynnie przechodzić od 100px do 0:

@keyframes myChange {
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
}
.ng-hide {
  height: 0;
}
</style>

Spróbuj sam

CSS animacje

CSS animacje pozwalają na płynne zmienianie wartości atrybutu CSS w określonym czasie:

instancja

gdy DIV element uzyskuje .ng-hide <style>

@keyframes myChange {
from {
  to {
    height: 100px;
  }
    height: 0;
  }
}
div {
  height: 100px;
  background-color: lightblue;
}
div.ng-hide {
  animation: 0.5s myChange;
}
</style>

Spróbuj sam