Animace AngularJS
AngularJS poskytuje animované přechody s pomocí CSS.
Co je to animace?
Animace je, když transformace prvku HTML poskytuje iluzi pohybu.
Příklad:
Zaškrtnutím políčka skryjete DIV:
<body ng-app="ngAnimate">
Hide the DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
Aplikace by neměly být plné animací, ale některé animace mohou aplikaci usnadnit pochopení.
Co potřebuji?
Aby byly vaše aplikace připraveny na animace, musíte zahrnout knihovnu AngularJS Animate:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
Poté se musíte obrátit na ngAnimatemodul ve vaší aplikaci:
<body ng-app="ngAnimate">
Nebo pokud má vaše aplikace název, přidejte ngAnimatejako závislost v modulu aplikace:
Příklad
<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 dělá ngAnimate?
Modul ngAnimate přidává a odebírá třídy.
Modul ngAnimate neanimuje vaše HTML elementy, ale když si ngAnimate všimne určitých událostí, jako je skrytí nebo zobrazení elementu HTML, element získá nějaké předdefinované třídy, které lze použít k vytváření animací.
Direktivy v AngularJS, které přidávají/odebírají třídy, jsou:
ng-showng-hideng-classng-viewng-includeng-repeatng-ifng-switch
Direktivy ng-showand ng-hidepřidávají nebo odebírají ng-hidehodnotu třídy.
Ostatní direktivy přidávají ng-enterhodnotu třídy, když vstupují do DOM, a ng-leaveatribut, když jsou z DOM odstraněny.
Direktiva ng-repeattaké přidá ng-movehodnotu třídy, když prvek HTML změní pozici.
Kromě toho bude mít prvek HTML během animace sadu hodnot tříd, které budou po dokončení animace odstraněny. Příklad:
ng-hidedirektiva přidá tyto hodnoty třídy:
ng-animateng-hide-animateng-hide-add(pokud bude prvek skrytý)ng-hide-remove(pokud bude prvek zobrazen)ng-hide-add-active(pokud bude prvek skrytý)ng-hide-remove-active(pokud bude prvek zobrazen)
Animace pomocí CSS
K animaci prvků HTML můžeme použít přechody CSS nebo animace CSS. Tento tutoriál vám ukáže obojí.
Chcete-li se dozvědět více o CSS animaci, prostudujte si náš kurz CSS Transition Tutorial a náš CSS Animation Tutorial .
Přechody CSS
Přechody CSS umožňují plynule měnit hodnoty vlastností CSS, z jedné hodnoty na druhou, po danou dobu:
Příklad:
Když prvek DIV získá .ng-hidetřídu, přechod bude trvat 0,5 sekundy a výška se plynule změní ze 100 pixelů na 0:
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide
{
height: 0;
}
</style>
CSS animace
Animace CSS vám umožňují plynule měnit hodnoty vlastností CSS, z jedné hodnoty na druhou, po danou dobu:
Příklad:
Když prvek DIV získá .ng-hidetřídu, myChange
spustí se animace, která plynule změní výšku ze 100 pixelů 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>