AngularJS Animation

Met de hulp van CSS biedt AngularJS animatie-overgangen.

Wat is animatie?

Animatie is een verandering van HTML-elementen die een bewegingsillusie oproept.

instance

Selecteer het selectievak om de DIV te verbergen:

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

Try It Yourself

Je applicatie zou niet vol animaties moeten zijn, maar enkele animaties kunnen de applicatie gemakkelijker begrijpelijk maken.

Wat heb ik nodig?

Om je applicatie voor animaties voor te bereiden, moet je de AngularJS Animate-bibliotheek opnemen:

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

Vervolgens moet je deze module in je toepassing verwijzen ngAnimate Module:

<body ng-app="ngAnimate">

Of, als je toepassing een naam heeft, voeg dan toe ngAnimate Voeg toe als afhankelijkheid van de toepassing module:

instance

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

Try It Yourself

Wat is de functie van ngAnimate?

ngAnimate De module klassen toevoegt en verwijdert.

ngAnimate De module maakt je HTML-elementen niet dynamisch, maar wanneer ngAnimate Opmerking: sommige gebeurtenissen (zoals het verbergen of weergeven van HTML-elementen) geven het element enkele vooraf gedefinieerde klassen, die kunnen worden gebruikt voor animaties.

Instructies voor het toevoegen en verwijderen van klassen in AngularJS zijn onder meer:

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

ng-show en ng-hide Instructies toevoegen of verwijderen ng-hide Klassensymbolen.

Andere instructies voegen toe wanneer ze in het DOM worden ingevoegd ng-enter Klassensymbolen, en voegt toe wanneer het uit het DOM wordt verwijderd ng-leave Eigenschappen.

Wanneer een HTML-element zijn positie wijzigtng-repeat De instructie voegt ook toe ng-move Klassensymbolen.

Daarnaast zal het HTML-element tijdens het animatieproces een set klassenwaarden hebben, die na de voltooiing van de animatie worden verwijderd. Bijvoorbeeld:ng-hide De instructie voegt deze klassenwaarden toe:

  • ng-animate
  • ng-hide-animate
  • ng-hide-add(Als je een element wilt verbergen)
  • ng-hide-remove(Als je een element wilt weergeven)
  • ng-hide-add-active(Als je een element wilt verbergen)
  • ng-hide-remove-active(Als je een element wilt weergeven)

Gebruik CSS voor animatiebehandeling

We kunnen CSS overgangen of CSS animaties gebruiken om animatieeffecten toe te voegen aan HTML-elementen. Deze tutorial zal je beide laten zien.

Voor meer informatie over CSS animaties, raadpleeg onze CSS overgangen tutorial en CSS animatie tutorial.

CSS overgangen

CSS overgangen laten je toe om een CSS-eigenschapswaarde geleidelijk te veranderen naar een andere waarde gedurende een gegeven duur:

instance

when the DIV element gets .ng-hide Bij het klassen, zal de overgang gedurende 0.5 seconden duren, de hoogte zal geleidelijk van 100px overgaan naar 0:

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

Try It Yourself

CSS Animations

CSS animations allow you to smoothly change the value of a CSS property over a given duration:

instance

when the DIV element gets .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>

Try It Yourself