AngularJS-animasies
AngularJS bied geanimeerde oorgange, met hulp van CSS.
Wat is 'n animasie?
'n Animasie is wanneer die transformasie van 'n HTML-element jou 'n illusie van beweging gee.
Voorbeeld:
Merk die merkblokkie om die DIV te versteek:
<body ng-app="ngAnimate">
Hide the DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
Aansoeke moet nie met animasies gevul word nie, maar sommige animasies kan die toepassing makliker maak om te verstaan.
Wat het ek nodig?
Om jou toepassings gereed te maak vir animasies, moet jy die AngularJS Animate-biblioteek insluit:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
Dan moet jy na die ngAnimatemodule in jou aansoek verwys:
<body ng-app="ngAnimate">
Of as jou aansoek 'n naam het, voeg by ngAnimateas 'n afhanklikheid in jou toepassingsmodule:
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 doen ngAnimate?
Die ngAnimate-module voeg klasse by en verwyder.
Die ngAnimate-module animeer nie jou HTML-elemente nie, maar wanneer ngAnimate sekere gebeurtenisse opmerk, soos versteek of wys van 'n HTML-element, kry die element 'n paar vooraf gedefinieerde klasse wat gebruik kan word om animasies te maak.
Die riglyne in AngularJS wat klasse byvoeg/verwyder, is:
ng-showng-hideng-classng-viewng-includeng-repeatng-ifng-switch
Die ng-showen - ng-hideaanwysings voeg 'n klaswaarde by of verwyder ng-hide.
Die ander riglyne voeg 'n ng-enterklaswaarde by wanneer hulle die DOM betree, en 'n ng-leavekenmerk wanneer hulle uit die DOM verwyder word.
Die ng-repeatopdrag voeg ook 'n ng-moveklaswaarde by wanneer die HTML-element van posisie verander.
Daarbenewens, tydens die animasie, sal die HTML-element 'n stel klaswaardes hê, wat verwyder sal word wanneer die animasie klaar is. Voorbeeld: die
ng-hideopdrag sal hierdie klaswaardes byvoeg:
ng-animateng-hide-animateng-hide-add(as die element versteek sal word)ng-hide-remove(as die element gewys sal word)ng-hide-add-active(as die element versteek sal word)ng-hide-remove-active(as die element gewys sal word)
Animasies met behulp van CSS
Ons kan CSS-oorgange of CSS-animasies gebruik om HTML-elemente te animeer. Hierdie handleiding sal jou albei wys.
Om meer te wete te kom oor CSS-animasie, bestudeer ons CSS-oorgangstutoriaal en ons CSS-animasie-tutoriaal .
CSS-oorgange
CSS-oorgange laat jou toe om CSS-eiendomwaardes glad te verander, van een waarde na 'n ander, oor 'n gegewe tydsduur:
Voorbeeld:
Wanneer die DIV-element die .ng-hideklas kry, sal die oorgang 0,5 sekondes neem, en die hoogte sal glad verander van 100px na 0:
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide
{
height: 0;
}
</style>
CSS-animasies
CSS Animations laat jou toe om CSS eiendom waardes glad te verander, van een waarde na 'n ander, oor 'n gegewe tydsduur:
Voorbeeld:
Wanneer die DIV-element die .ng-hideklas kry, myChange
sal die animasie loop, wat die hoogte glad sal verander van 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>