Animation ng AngularJS

Sa tulong ng CSS, nagbibigay ang AngularJS ng paglilipat ng animasyon.

Ano ang animasyon?

Ang animasyon ay ang pagbabago ng HTML elemento na nagbibigay sa iyo ng isang kawalang katotohanang kahinaan ng kilos.

instance

Piliin ang check box upang itago ang DIV:

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

Subukan Ngayon

Hindi dapat mapupuno ng animasyon ang iyong aplikasyon, ngunit ang ilang animasyon ay magiging mas madaling maunawaan ang aplikasyon.

Ano kailangan ko?

Para makipagpatadyang sa iyong aplikasyon sa paggamit ng animasyon, dapat mong kasama ang AngularJS Animate library:

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

Pagkatapos, dapat mong ipakita ang module sa iyong aplikasyon. ngAnimate Module:

<body ng-app="ngAnimate">

O kaya, kung may pangalan ang iyong aplikasyon, magdagdag ng: ngAnimate Magdagdag bilang dependency sa modulong aplikasyon:

instance

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

Subukan Ngayon

Ano ang ginagawa ng ngAnimate?

ngAnimate Ang module ay magadagdag at magtanggal ng mga klase.

ngAnimate Ang module na ito ay hindi nagbibigay ng animation sa iyong HTML element, ngunit kapag ngAnimate Notahin ang ilang mga pangyayari (tulad ng pagtatago o pagpapakita ng HTML element), ang elemento ay magkaroon ng ilang pre-defined na klase, na maaaring gamitin para sa paggawa ng animation.

Ang mga directive na magdagdag o magtanggal ng klase sa AngularJS kasama ang:

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

ng-show at ng-hide Directive na magdagdag o magtanggal ng-hide Halagang klase.

Ilang directive ay magadagdag ng mga klase kapag papasok sa DOM. ng-enter Halagang klase, at magadagdag sa DOM pagkatapos itatanggal. ng-leave property.

Kapag nagbabago ang posisyon ng HTML elementng-repeat Ang directive na ito ay magadagdag pa ng: ng-move Halagang klase.

Bilang karagdagan, ang HTML element ay magkaroon ng isang grupo ng mga halagang klase sa panahon ng animation, at ang mga ito ay itatanggal pagkatapos magwakas ang animation. Halimbawa:ng-hide Ang mga directive na ito ay magadagdag ng mga halagang klase:

  • ng-animate
  • ng-hide-animate
  • ng-hide-add(Kung saan itatakan ang elemento)
  • ng-hide-remove(Kung saan ipapakita ang elemento)
  • ng-hide-add-active(Kung saan itatakan ang elemento)
  • ng-hide-remove-active(Kung saan ipapakita ang elemento)

Gagamitin ang CSS para sa paggawa ng animation

Maaari naming gamitin ang CSS transition o CSS animation upang magdagdag ng mga epekto ng animation sa mga HTML element. Ito ang aking tutorial ay magbibigay sa iyo ng impormasyon sa parehong dalawa.

Para sa mas maraming impormasyon tungkol sa CSS animation, matututunan mo ang aming mga tutorial sa CSS transition at CSS animation.

CSS Transition

Ang CSS transition ay nagbibigay sa iyo ng kapangyarihan na magpalit ng halaga ng isang CSS attribute sa ibang halaga sa ilalim ng binigay na oras:

instance

kapag ang DIV element ay nakakakuha ng .ng-hide Sa panahon ng paglapit, ang paglilipat ay magpapatuloy ng 0.5 segundo, ang taas ay magpapatuloy sa 100px hanggang 0:

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

Subukan Ngayon

CSS Animation

Ang CSS animation ay nagbibigay-daan sa iyo na magpalipat ng isang CSS property value sa ibang value sa ilalim ng ibigay na abot ng panahon:

instance

kapag ang DIV element ay nakakakuha ng .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>

Subukan Ngayon