AngularJS oferă tranziții animate, cu ajutorul CSS.
Ce este o animație?
O animație este atunci când transformarea unui element HTML vă oferă o iluzie de mișcare.
Exemplu:
Bifați caseta de selectare pentru a ascunde DIV:
<body ng-app="ngAnimate">
Hide the DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
Încearcă - l singur » Aplicațiile nu trebuie să fie umplut cu animatii, dar unele animatii pot face aplicarea mai ușor de înțeles.
De ce am nevoie?
Pentru a face aplicațiile gata pentru animații, trebuie să includă biblioteca AngularJS Animare:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
Apoi , trebuie să vă referiți la ngAnimate modulul în aplicația:
<body ng-app="ngAnimate"> Sau , dacă aplicația are un nume, adăugați ngAnimate ca dependență în modulul aplicației:
Exemplu
<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> Încearcă - l singur » Ce inseamna ngAnimate Do?
Modulul ngAnimate adaugă și elimină clase.
Modulul ngAnimate nu anima elemente HTML, dar atunci când ngAnimate observați anumite evenimente, cum ar fi ascunde sau a afișa unui element HTML, elementul devine unele clase predefinite, care pot fi utilizate pentru a face animații.
Directivele din AngularJS care adauga / elimina clase sunt:
-
ng-show -
ng-hide -
ng-class -
ng-view -
ng-include -
ng-repeat -
ng-if -
ng-switch
ng-show și ng-hide directivele adaugă sau elimină un ng-hide valoare de clasă.
Celelalte directive adaugă o ng-enter valoare de clasă atunci când intră în DOM, și un ng-leave atribut atunci când acestea sunt eliminate din DOM.
ng-repeat directiva adaugă , de asemenea , o ng-move valoare de clasă , atunci când elementul HTML schimbă poziția.
În plus, în timpul animației, elementul HTML va avea un set de valori de clasă, care vor fi eliminate atunci când animația sa terminat. Exemplu: ng-hide directivă va adăuga aceste valori de clasă:
-
ng-animate -
ng-hide-animate -
ng-hide-add(if the element will be hidden) în (if the element will be hidden) care (if the element will be hidden) -
ng-hide-remove(if the element will be showed) în (if the element will be showed) care (if the element will be showed) -
ng-hide-add-active(if the element will be hidden) în (if the element will be hidden) care (if the element will be hidden) -
ng-hide-remove-active(if the element will be showed) în (if the element will be showed) care (if the element will be showed)
Animații Utilizarea CSS
Putem folosi tranziții CSS sau animatii CSS pentru a anima elemente HTML. Acest tutorial vă va arăta ambele.
Pentru a afla mai multe despre Animation CSS, studiul nostru CSS Tranziție Tutorial și nostru CSS Animation Tutorial .
CSS Tranziții
tranziții CSS vă permite să schimbați valorile de proprietate CSS lin, de la o valoare la alta, într-o anumită durată:
Exemplu:
Atunci când elementul DIV devine .ng-hide clasa, tranziția va dura 0,5 secunde, iar înălțimea se va schimba lin de la 100px la 0:
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide
{
height: 0;
}
</style>
Încearcă - l singur » CSS Animații
CSS Animații vă permite să schimbați valorile de proprietate CSS lin, de la o valoare la alta, într-o anumită durată:
Exemplu:
Atunci când elementul DIV devine .ng-hide , clasa, myChange animație va rula, care se va schimba lin înălțimea de la 100px la 0:
<style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>
Încearcă - l singur »