Animazione AngularJS

Con l'aiuto del CSS, AngularJS offre transizioni animate.

Cos'è l'animazione?

L'animazione è la trasformazione degli elementi HTML che ti dà una sensazione di movimento.

istanza

Seleziona la casella di controllo per nascondere il DIV:

<body ng-app="ngAnimate">
Nascondi DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>

Prova personalmente

L'applicazione non dovrebbe essere piena di animazioni, ma alcune animazioni possono rendere l'applicazione più facile da comprendere.

Cosa devo avere?

Per preparare la tua applicazione agli animazioni, devi includere la libreria AngularJS Animate:

<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-animate.js"></script>

Poi, devi referenziare il modulo nell'applicazione. ngAnimate modulo:

<body ng-app="ngAnimate">

O, se il tuo applicazione ha un nome, aggiungi ngAnimate Aggiungi come dipendenza del modulo dell'applicazione:

istanza

<body ng-app="myApp">
<h1>Nascondere DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>

Prova personalmente

Cos'è il ruolo del modulo ngAnimate?

ngAnimate aggiunge e rimuove classi.

ngAnimate Il modulo non anima i tuoi elementi HTML, ma quando ngAnimate Notare che alcuni eventi (come la visualizzazione o la nascita di un elemento HTML) aggiungono alcune classi predefinite all'elemento, che possono essere utilizzate per creare animazioni.

Le istruzioni per aggiungere o rimuovere classi in AngularJS includono:

  • ng-show
  • ng-hide
  • ng-class
  • ng-view
  • ng-include
  • ng-repeat
  • ng-if
  • ng-switch

ng-show e ng-hide aggiunge o rimuove ng-hide Valori di classe.

Altre istruzioni aggiungono ng-enter aggiunge questi valori di classe e li rimuove quando viene rimosso dal DOM ng-leave attributo.

Quando l'elemento HTML cambia posizioneng-repeat L'instruzione aggiungerà anche ng-move Valori di classe.

Inoltre, durante il processo di animazione, l'elemento HTML avrà un insieme di valori di classe che verranno rimossi alla fine dell'animazione. Ad esempio:ng-hide L'instruzione aggiungerà questi valori di classe:

  • ng-animate
  • ng-hide-animate
  • ng-hide-add(Se si desidera nascondere l'elemento)
  • ng-hide-remove(Se si desidera visualizzare l'elemento)
  • ng-hide-add-active(Se si desidera nascondere l'elemento)
  • ng-hide-remove-active(Se si desidera visualizzare l'elemento)

Gestione delle animazioni con CSS

Possiamo utilizzare le transizioni CSS o le animazioni CSS per aggiungere effetti animati agli elementi HTML. Questo tutorial ti mostrerà entrambi.

Per ulteriori informazioni sulle animazioni CSS, consulta le nostre guide sulla transizione CSS e sull'animazione CSS.

Transizione CSS

La transizione CSS ti permette di cambiare in modo fluido il valore di un attributo CSS nel tempo specificato:

istanza

quando l'elemento DIV ottiene .ng-hide Alla transizione, la durata sarà di 0.5 secondi, l'altezza passerà in modo fluido da 100px a 0:

@keyframes myChange {
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
}
.ng-hide {
  height: 0;
}
</style>

Prova personalmente

Animazioni CSS

Le animazioni CSS permettono di cambiare in modo fluido il valore di un attributo CSS nel tempo specificato:

istanza

quando l'elemento DIV ottiene .ng-hide <style>

@keyframes myChange {
from {
  to {
    height: 100px;
  }
    height: 0;
  }
}
div {
  height: 100px;
  background-color: lightblue;
}
div.ng-hide {
  animation: 0.5s myChange;
}
</style>

Prova personalmente