AngularJS Animation

Med hjælp fra CSS tilbyder AngularJS animationseffekter.

Hvad er animation?

Animationer er ændringer af HTML-elementer, der giver dig en fornemmelse af bevægelse.

eksempel

Markér afkrydsningsfeltet for at skjule DIV:

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

Prøv det selv

Din applikation bør ikke være fyldt med animationer, men nogle animationer kan gøre applikationen lettere at forstå.

Hvad skal jeg bruge?

For at din applikation skal være klar til animationer, skal du inkludere AngularJS Animate-biblioteket:

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

Dernæst skal du referere til modulet i din applikation. ngAnimate Modul:

<body ng-app="ngAnimate">

Eller, hvis din applikation har et navn, skal du sætte ngAnimate Tilføj som afhængighed i applikationens modul:

eksempel

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

Prøv det selv

Hvad er ngAnimate's funktion?

ngAnimate modulen tilføjer og fjerner klasser.

ngAnimate Modulen gør ikke dine HTML-elementer til animationer, men når ngAnimate Bemærk, at nogle begivenheder (som skjulelse eller visning af HTML-elementer) giver elementet nogle prædefinerede klasser, som kan bruges til at lave animationer.

Instruktioner til tilføjelse/fjernelse af klasser i AngularJS inkluderer:

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

ng-show og ng-hide Instruktioner tilføjer eller fjerner ng-hide Klasser.

Andre instruktioner tilføjer disse, når de tilføjes til DOM'en ng-enter klasser og tilføjer disse, når de fjernes fra DOM'en ng-leave egenskaber.

Når HTML-elementet ændrer positionng-repeat Instruktionen tilføjer også ng-move Klasser.

Desuden vil HTML-elementet have en række klasser under animationen, som vil blive slettet efter afslutningen af animationen. For eksempel:ng-hide Instruktioner tilføjer disse klasser:

  • ng-animate
  • ng-hide-animate
  • ng-hide-add(Hvis du vil skjule elementet)
  • ng-hide-remove(Hvis du vil vise elementet)
  • ng-hide-add-active(Hvis du vil skjule elementet)
  • ng-hide-remove-active(Hvis du vil vise elementet)

Anvend CSS til animation

Vi kan bruge CSS-overgange eller CSS-animation til at tilføje animationseffekter til HTML-elementer. Dette tutorial vil vise dig begge dele.

For at lære mere om CSS-animation, læs vores CSS-overgangs- og CSS-animationstutorials.

CSS-overgang

CSS-overgange lader dig ændre værdien af en CSS-egenskab glat over en given varighed:

eksempel

når DIV-elementet får .ng-hide Når klassen ændres, vil overgangen vare 0.5 sekund, højden vil glat overgå fra 100px til 0:

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

Prøv det selv

CSS-animationer

CSS-animationer giver dig mulighed for at glatte en CSS-egenskabsværdi til en anden værdi over en given periode:

eksempel

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

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

Prøv det selv