AngularJS animaatio

CSS:n avulla AngularJS tarjoaa animaatiotransitiot.

Mitä animaatio on?

Animaatio tarkoittaa HTML-elementin muodonmuutosta, joka antaa sinulle liikkeen harhakuvan.

esimerkki

Valitse valintaruutu piilottamaan DIV:

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

Kokeile itse

Sovelluksesta ei pitäisi olla täynnä animaatioita, mutta muutamat animaatiot voivat tehdä sovelluksesta helpommin ymmärrettävän.

Mitä minun täytyy tehdä?

Jotta sovelluksesi valmistautuisi animaatioihin, sinun on sisällytettävä AngularJS Animate-kirjasto:

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

Sitten sinun täytyy viitata moduuliin sovelluksessasi ngAnimate Moduuli:

<body ng-app="ngAnimate">

Tai, jos sovelluksellasi on nimi, lisää ngAnimate Lisää riippuvuudet sovelluksen moduuliin:

esimerkki

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

Kokeile itse

Mitä ngAnimate tekee?

ngAnimate Moduuli lisää ja poistaa luokat.

ngAnimate Moduuli ei tee HTML-elementistäsi animaatiota, mutta kun ngAnimate Huomaa, että tiettyjä tapahtumia (kuten HTML-elementin piilottamista tai näyttämistä) tapahtuessa elementti saa joitakin määritettyjä luokkia, joita voidaan käyttää animaatioiden tekemiseen.

AngularJS:hen lisättyjä ja poistettuja luokkia lisääviä ohjeita ovat:

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

ng-show ja ng-hide Ohjeet lisäävät tai poistavat ng-hide Luokat.

Muut ohjeet lisäävät luokat DOMiin tullessaan ng-enter Luokat lisätään, kun elementti poistetaan DOMista, ja ng-leave ominaisuudet.

Kun HTML-elementin sijainti muuttuung-repeat Ohjeet lisäävät myös ng-move Luokat.

Lisäksi animaation aikana HTML-elementillä on joukko luokkia, jotka poistetaan, kun animaatio on valmis. Esimerkiksi:ng-hide Ohjeet lisäävät nämä luokat:

  • ng-animate
  • ng-hide-animate
  • ng-hide-add(Jos haluat piilottaa elementin)
  • ng-hide-remove(Jos haluat näyttää elementin)
  • ng-hide-add-active(Jos haluat piilottaa elementin)
  • ng-hide-remove-active(Jos haluat näyttää elementin)

CSS:llä tehtävät animaatiot

Voimme käyttää CSS-siirtymiä tai CSS-animaatioita HTML-elementtien animaatioiden lisäämiseen. Tämä oppaamme näyttää molemmat.

Lisätietoja CSS-animaatioista löydät CSS-siirtymäoppaastamme ja CSS-animaatiotutkimuksestamme.

CSS-siirtymät

CSS-siirtymät mahdollistavat, että voit CSS-ominaisuuden arvoa pehmeästi muuttaa toiseen annetun ajan kuluessa:

esimerkki

kun DIV-elementti saa .ng-hide Kun luokka on, siirtymä kestää 0,5 sekuntia, korkeus siirtyy 100px:sta pehmeästi 0:aan:

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

Kokeile itse

CSS-animaatio

CSS-animaatio mahdollistaa CSS-ominaisuuden arvon pehmeän muuttamisen toiseen arvoon annetun ajan kuluessa:

esimerkki

kun DIV-elementti saa .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>

Kokeile itse