AngularJS Animasyonları
AngularJS, CSS'nin yardımıyla animasyonlu geçişler sağlar.
Animasyon nedir?
Animasyon, bir HTML öğesinin dönüştürülmesinin size bir hareket yanılsaması verdiği zamandır.
Örnek:
DIV'yi 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>
Uygulamalar animasyonlarla doldurulmamalıdır, ancak bazı animasyonlar uygulamanın anlaşılmasını kolaylaştırabilir.
Neye ihtiyacım var?
Uygulamalarınızı animasyonlara hazır hale getirmek için AngularJS Animate kitaplığını eklemelisiniz:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
Ardından ngAnimate, uygulamanızdaki modüle başvurmalısınız:
<body ng-app="ngAnimate">
Veya uygulamanızın bir adı varsa, ngAnimateuygulama modülünüze bağımlılık olarak ekleyin:
Ö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>
ngAnimate Ne Yapar?
ngAnimate modülü, sınıfları ekler ve kaldırır.
ngAnimate modülü, HTML öğelerinizi canlandırmaz, ancak ngAnimate, bir HTML öğesinin gizlenmesi veya gösterilmesi gibi belirli olayları fark ettiğinde, öğe, animasyon yapmak için kullanılabilecek bazı önceden tanımlanmış sınıfları alır.
AngularJS'de sınıf ekleyen/kaldıran yönergeler şunlardır:
ng-showng-hideng-classng-viewng-includeng-repeatng-ifng-switch
ve yönergeleri bir sınıf değeri ekler ng-showveya ng-hidekaldırır .ng-hide
Diğer yönergeler ng-enter, DOM'a girdiklerinde bir sınıf değeri ve DOM'dan ng-leavekaldırıldıklarında bir öznitelik ekler.
Yönerge , HTML öğesi konum değiştirdiğinde de bir sınıf değeri ng-repeatekler .ng-move
Ek olarak, animasyon sırasında HTML öğesi, animasyon bittiğinde kaldırılacak olan bir dizi sınıf değerine sahip olacaktır. Örnek:
ng-hideyönerge şu sınıf değerlerini ekleyecektir:
ng-animateng-hide-animateng-hide-add(eğer eleman gizlenecekse)ng-hide-remove(eğer eleman gösterilecekse)ng-hide-add-active(eğer eleman gizlenecekse)ng-hide-remove-active(eğer eleman gösterilecekse)
CSS Kullanan Animasyonlar
HTML öğelerini canlandırmak için CSS geçişlerini veya CSS animasyonlarını kullanabiliriz. Bu eğitim size her ikisini de gösterecektir.
CSS Animasyonu hakkında daha fazla bilgi edinmek için CSS Geçiş Eğitimimizi ve CSS Animasyon Eğitimimizi inceleyin .
CSS Geçişleri
CSS geçişleri, belirli bir süre boyunca CSS özellik değerlerini bir değerden diğerine sorunsuz bir şekilde değiştirmenize olanak tanır:
Örnek:
DIV öğesi sınıfı aldığında, .ng-hidegeçiş 0,5 saniye sürecek ve yükseklik 100 pikselden 0 piksele sorunsuz bir şekilde değişecek:
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide
{
height: 0;
}
</style>
CSS Animasyonları
CSS Animasyonları, belirli bir süre boyunca CSS özellik değerlerini bir değerden diğerine sorunsuz bir şekilde değiştirmenize olanak tanır:
Örnek:
.ng-hideDIV öğesi sınıfı aldığında, myChange
yüksekliği sorunsuz bir şekilde 100 pikselden 0'a değiştirecek olan animasyon ç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>