AngularJS animation

Med hjälp av CSS erbjuder AngularJS animationstransitioner.

Vad är animation?

Animationer är förändringar av HTML-element som ger en illusion av rörelse.

exempel

Markera kryssrutan för att dölja DIV:

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

Prova själv

Applikationen bör inte vara uppfylld med animationer, men några animationer kan göra applikationen enklare att förstå.

Vad behöver jag?

För att din applikation ska vara redo för animationer måste du inkludera AngularJS Animate-biblioteket:

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

Då måste du hänvisa till modulen i din applikation. ngAnimate Modul:

<body ng-app="ngAnimate">

Eller, om ditt program har ett namn, sätt ngAnimate Lägg till som beroende i applikationsmodulen:

exempel

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

Prova själv

Vad är ngAnimate:s funktion?

ngAnimate modulen lägger till och tar bort klasser.

ngAnimate Modulen gör inte dina HTML-element animerade, men när ngAnimate När du uppmärksammar vissa händelser (som att dölja eller visa HTML-element) får elementet några fördefinierade klasser, som kan användas för att skapa animationer.

Anvisningar för att lägga till eller ta bort klasser i AngularJS inkluderar:

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

ng-show och ng-hide anvisningar för att lägga till eller ta bort ng-hide Klassvärden.

andra anvisningar lägger till ng-enter klassvärden och lägger till ng-leave egenskaper.

När ett HTML-element ändrar platsng-repeat Anvisningen lägger också till ng-move Klassvärden.

Dessutom kommer HTML-elementet att ha en uppsättning klassvärden under animationen, och dessa värden kommer att tas bort efter att animationen är klar. Till exempel:ng-hide Anvisningen lägger till dessa klassvärden:

  • ng-animate
  • ng-hide-animate
  • ng-hide-add(Om du vill dölja elementet)
  • ng-hide-remove(Om du vill visa elementet)
  • ng-hide-add-active(Om du vill dölja elementet)
  • ng-hide-remove-active(Om du vill visa elementet)

Använd CSS för att hantera animationer

Vi kan använda CSS-overgångar eller CSS-animationer för att lägga till animeringar till HTML-element. Detta tutorial kommer att visa båda.

För mer information om CSS-animation, lär dig våra CSS-overgångs- och CSS-animationstips.

CSS-overgång

CSS-overgångar låter dig under en given tid平滑地更改CSS-egenskapsvärden:

exempel

när DIV-elementet får .ng-hide När en klass tillämpas, kommer övergången att pågå i 0,5 sekunder, och höjden kommer att smidigt övergå från 100px till 0:

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

Prova själv

CSS-animation

CSS-animation tillåter dig att mjukt ändra en CSS-attributsvärde över en given tid:

exempel

när DIV-elementet får .ng-hide <style>

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

Prova själv