Angularjs CSS yardımıyla, animasyonlu geçişler sağlar.
Bir Animasyon nedir?
Bir HTML elemanının dönüşümü size bir hareket izlenimi verdiği zaman bir animasyon.
Örnek:
DIV gizlemek için onay kutusunu işaretleyin:
<body ng-app="ngAnimate">
Hide the DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
Kendin dene " Uygulamalar animasyonlar ile dolu olmamalı, ancak bazı animasyonlar anlamak uygulama kolaylaştırabilir.
Neye ihtiyacım var?
Eğer angularjs Animasyon kütüphanesini içermelidir animasyonlar için uygulamalarınız hazır hale getirmek için:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
Sonra başvurmalıdır ngAnimate uygulamanızda modülü:
<body ng-app="ngAnimate"> Başvurunuz bir ismi var Veya, eklemek ngAnimate başvurunuzun modülünde bir bağımlılık olarak:
Örnek
<body ng-app="myApp">
<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
var app =
angular. module('myApp', ['ngAnimate']) ;
</script> Kendin dene " ngAnimate Ne Yapar?
ngAnimate modülü ekler ve sınıfları kaldırır.
ngAnimate modülü HTML öğelerin animasyonunun yok, ama ngAnimate bir HTML elemanının deri veya göstermek gibi bazı olayları fark ettiğimizde, eleman animasyonlar yapmak için kullanılabilecek bazı ön tanımlı sınıfları alır.
eklemek angularjs yönergelerin / kaldırmak sınıfları şunlardır:
-
ng-show -
ng-hide -
ng-class -
ng-view -
ng-include -
ng-repeat -
ng-if -
ng-switch
ng-show ve ng-hide direktifleri ekler veya bir kaldırır ng-hide sınıf değeri.
Diğer direktifler bir ekler ng-enter onlar DOM girmek sınıf değerini ve ng-leave onlar DOM kaldırılır özniteliği.
ng-repeat yönergesi da ekler ng-move HTML öğesi konumunu değiştirdiğinde sınıf değeri.
Buna ek olarak, animasyon sırasında, HTML öğesi animasyon tamamladığında kaldırılacak sınıf değerleri, bir dizi olacaktır. Örnek: ng-hide yönergesi bu sınıf değerlerini katacak:
-
ng-animate -
ng-hide-animate -
ng-hide-add(if the element will be hidden) -
ng-hide-remove(if the element will be showed) -
ng-hide-add-active(if the element will be hidden) -
ng-hide-remove-active(if the element will be showed)
CSS kullanarak Animasyonlar
Biz HTML öğelerini animasyon uygulamak için CSS geçişleri veya CSS animasyonları kullanabilirsiniz. Bu örnek, size hem gösterecektir.
CSS Animasyon hakkında daha fazla bilgi edinmek için öğrenim CSS Geçiş Eğitimi ve CSS Animasyon Eğitimi .
CSS Geçişler
CSS geçişleri belirli bir süre boyunca, başka bir değerden, sorunsuz CSS özellik değerlerini değiştirmek için izin verir:
Örnek:
DIV elemanı aldığında .ng-hide sınıfı, geçiş 0.5 saniye sürer ve yükseklik düzgün 100px 0 ila değişecektir:
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide
{
height: 0;
}
</style>
Kendin dene " CSS Animasyonlar
CSS Animasyonlar, belirli bir süre boyunca, başka bir değerden, sorunsuz CSS özellik değerlerini değiştirmek için izin verir:
Örnek:
DIV elemanı aldığında .ng-hide sınıfı, myChange animasyon düzgün 100px 0 ila yüksekliğini değiştirmek, hangi çalışır:
<style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>
Kendin dene "