AngularJS-animaties
AngularJS biedt geanimeerde overgangen, met hulp van CSS.
Wat is een animatie?
Een animatie is wanneer de transformatie van een HTML-element je een illusie van beweging geeft.
Voorbeeld:
Vink het selectievakje aan om de DIV te verbergen:
<body ng-app="ngAnimate">
Hide the DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
Applicaties mogen niet gevuld zijn met animaties, maar sommige animaties kunnen de applicatie begrijpelijker maken.
Wat heb ik nodig?
Om uw applicaties klaar te maken voor animaties, moet u de AngularJS Animate-bibliotheek opnemen:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
Dan moet u in uw aanvraag verwijzen naar de ngAnimatemodule:
<body ng-app="ngAnimate">
Of als uw applicatie een naam heeft, voeg ngAnimatedan als afhankelijkheid toe in uw applicatiemodule:
Voorbeeld
<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>
Wat doet ngAnimate?
De ngAnimate-module voegt klassen toe en verwijdert ze.
De ngAnimate-module animeert uw HTML-elementen niet, maar wanneer ngAnimate bepaalde gebeurtenissen opmerkt, zoals het verbergen of tonen van een HTML-element, krijgt het element een aantal vooraf gedefinieerde klassen die kunnen worden gebruikt om animaties te maken.
De richtlijnen in AngularJS die klassen toevoegen/verwijderen zijn:
ng-showng-hideng-classng-viewng-includeng-repeatng-ifng-switch
De ng-showen ng-hiderichtlijnen voegen een klassewaarde toe of verwijderen ng-hidedeze.
De andere richtlijnen voegen een ng-enterklassewaarde toe wanneer ze de DOM binnenkomen, en een ng-leaveattribuut wanneer ze uit de DOM worden verwijderd.
De ng-repeatrichtlijn voegt ook een ng-moveklassewaarde toe wanneer het HTML-element van positie verandert.
Bovendien heeft het HTML-element tijdens de animatie een set klassewaarden, die worden verwijderd wanneer de animatie is voltooid. Voorbeeld: de
ng-hiderichtlijn zal deze klassewaarden toevoegen:
ng-animateng-hide-animateng-hide-add(als het element wordt verborgen)ng-hide-remove(als het element wordt getoond)ng-hide-add-active(als het element wordt verborgen)ng-hide-remove-active(als het element wordt getoond)
Animaties met CSS
We kunnen CSS-overgangen of CSS-animaties gebruiken om HTML-elementen te animeren. Deze tutorial laat je beide zien.
Voor meer informatie over CSS-animatie, bestudeer onze CSS-overgangshandleiding en onze CSS-animatiehandleiding .
CSS-overgangen
Met CSS-overgangen kunt u CSS-eigenschapswaarden soepel wijzigen, van de ene waarde naar de andere, gedurende een bepaalde duur:
Voorbeeld:
Wanneer het DIV-element de .ng-hideklasse krijgt, duurt de overgang 0,5 seconde en verandert de hoogte soepel van 100px naar 0:
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide
{
height: 0;
}
</style>
CSS-animaties
Met CSS-animaties kunt u CSS-eigenschapswaarden soepel wijzigen, van de ene waarde naar de andere, gedurende een bepaalde duur:
Voorbeeld:
Wanneer het DIV-element de .ng-hideklasse krijgt, wordt de myChange
animatie uitgevoerd, waardoor de hoogte soepel wordt gewijzigd van 100px in 0:
<style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>