Animazioni AngularJS
AngularJS fornisce transizioni animate, con l'aiuto di CSS.
Che cos'è un'animazione?
Un'animazione è quando la trasformazione di un elemento HTML ti dà l'illusione del movimento.
Esempio:
Seleziona la casella di controllo per nascondere il DIV:
<body ng-app="ngAnimate">
Hide the DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
Le applicazioni non devono essere riempite con animazioni, ma alcune animazioni possono semplificare la comprensione dell'applicazione.
Di cosa ho bisogno?
Per rendere le tue applicazioni pronte per le animazioni, devi includere la libreria AngularJS Animate:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
Quindi devi fare riferimento al ngAnimatemodulo nella tua applicazione:
<body ng-app="ngAnimate">
Oppure, se la tua applicazione ha un nome, aggiungi ngAnimatecome dipendenza nel modulo dell'applicazione:
Esempio
<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>
Cosa fa ngAnimate?
Il modulo ngAnimate aggiunge e rimuove classi.
Il modulo ngAnimate non anima i tuoi elementi HTML, ma quando ngAnimate nota determinati eventi, come nascondere o mostrare un elemento HTML, l'elemento ottiene alcune classi predefinite che possono essere utilizzate per creare animazioni.
Le direttive in AngularJS che aggiungono/rimuove classi sono:
ng-showng-hideng-classng-viewng-includeng-repeatng-ifng-switch
Le direttive ng-showe aggiungono o rimuovono un valore di classe.ng-hideng-hide
Le altre direttive aggiungono un ng-entervalore di classe quando entrano nel DOM e un ng-leaveattributo quando vengono rimosse dal DOM.
La ng-repeatdirettiva aggiunge anche un ng-movevalore di classe quando l'elemento HTML cambia posizione.
Inoltre, durante l'animazione, l'elemento HTML avrà una serie di valori di classe, che verranno rimossi al termine dell'animazione. Esempio: la
ng-hidedirettiva aggiungerà questi valori di classe:
ng-animateng-hide-animateng-hide-add(se l'elemento sarà nascosto)ng-hide-remove(se l'elemento verrà mostrato)ng-hide-add-active(se l'elemento sarà nascosto)ng-hide-remove-active(se l'elemento verrà mostrato)
Animazioni utilizzando CSS
Possiamo usare transizioni CSS o animazioni CSS per animare elementi HTML. Questo tutorial ti mostrerà entrambi.
Per saperne di più sull'animazione CSS, studia il nostro tutorial sulla transizione CSS e il nostro tutorial sull'animazione CSS .
Transizioni CSS
Le transizioni CSS ti consentono di modificare i valori delle proprietà CSS senza problemi, da un valore all'altro, per una determinata durata:
Esempio:
Quando l'elemento DIV ottiene la .ng-hideclasse, la transizione richiederà 0,5 secondi e l'altezza cambierà gradualmente da 100px a 0:
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide
{
height: 0;
}
</style>
Animazioni CSS
Animazioni CSS ti consente di modificare i valori delle proprietà CSS senza problemi, da un valore all'altro, per una determinata durata:
Esempio:
Quando l'elemento DIV ottiene la .ng-hideclasse, l' myChange
animazione verrà eseguita, che cambierà uniformemente l'altezza da 100px a 0:
<style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>