Animacje AngularJS
AngularJS zapewnia animowane przejścia z pomocą CSS.
Co to jest animacja?
Animacja ma miejsce wtedy, gdy transformacja 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>
Aplikacje nie powinny być wypełnione animacjami, ale niektóre animacje mogą ułatwić zrozumienie aplikacji.
Czego potrzebuję?
Aby Twoje aplikacje były gotowe do animacji, musisz dołączyć bibliotekę AngularJS Animate:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
Następnie musisz odwołać się do ngAnimatemodułu w swojej aplikacji:
<body ng-app="ngAnimate">
Lub jeśli Twoja aplikacja ma nazwę, dodaj ngAnimatejako 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>
Co robi ngAnimate?
Moduł ngAnimate dodaje i usuwa klasy.
Moduł ngAnimate nie animuje twoich elementów HTML, ale gdy ngAnimate zauważy pewne zdarzenia, takie jak ukrycie lub pokazanie elementu HTML, element otrzyma kilka predefiniowanych klas, których można użyć do tworzenia animacji.
Dyrektywy w AngularJS, które dodają/usuwają klasy to:
ng-showng-hideng-classng-viewng-includeng-repeatng-ifng-switch
Dyrektywy ng-showi ng-hidedodają lub usuwają ng-hidewartość klasy.
Inne dyrektywy dodają ng-enterwartość klasy po wejściu do DOM i ng-leaveatrybut, gdy są usuwane z DOM.
Dyrektywa ng-repeatdodaje również ng-movewartość klasy, gdy element HTML zmienia pozycję.
Dodatkowo podczas animacji element HTML będzie posiadał zestaw wartości klas, które zostaną usunięte po zakończeniu animacji. Przykład:
ng-hidedyrektywa doda te wartości klas:
ng-animateng-hide-animateng-hide-add(jeśli element będzie ukryty)ng-hide-remove(jeśli element zostanie pokazany)ng-hide-add-active(jeśli element będzie ukryty)ng-hide-remove-active(jeśli element zostanie pokazany)
Animacje z wykorzystaniem CSS
Możemy użyć przejść CSS lub animacji CSS do animowania elementów HTML. Ten samouczek pokaże ci obie.
Aby dowiedzieć się więcej o animacji CSS, zapoznaj się z samouczkiem przejścia CSS i samouczkiem animacji CSS .
Przejścia CSS
Przejścia CSS umożliwiają płynną zmianę wartości właściwości CSS, z jednej wartości na drugą, w określonym czasie:
Przykład:
Gdy element DIV dostanie .ng-hideklasę, przejście zajmie 0,5 sekundy, a wysokość zmieni się płynnie ze 100px na 0:
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide
{
height: 0;
}
</style>
Animacje CSS
Animacje CSS umożliwiają płynną zmianę wartości właściwości CSS, z jednej wartości na drugą, w określonym czasie:
Przykład:
Gdy element DIV dostanie .ng-hideklasę, uruchomi się myChange
animacja, która płynnie zmieni wysokość ze 100px na 0:
<style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>