ngAnimate Kullanımı ve Çalışma Mantığı
ngAnimate, CSS animasyon ve transition özelliklerini, AngularJS için daha kolay kullanılabilir hale getiren bir modüldür denilebilir. Ng-hide/ng-show, ng-if, ng-repeat gibi direktifleri kullanırken, DOM objesinin çıktısı ve bu çıktının sahip olduğu-olacağı sınıf değerlerine tam olarak hakim olamıyoruz. NgAnimate, bu direktiflerin değerlerine göre alakalı DOM elementıerine sınıf vererek CSS üzerinde bu sınıf için animasyon atamamıza izin verir.
Not: Bahsettiğimiz gibi, bu tür aksiyonlar CSS ve Javascript ile de aynı kolaylıkta gerçekleştirilebiliyor. NgAnimate'in gerçekten işleri kolaylaştırdığı kısmı, ng-if ve ng-repeat direktiflerinin animasyonu sırasında karşımıza geliyor.
Bir örnek ile ng-repeat direktifi kullanılan bir uygulamadaki değişimleri nasıl animasyona katabileceğimizi görelim;
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.6.8/angular-animate.js"></script>
<style>
.kutu {
border: 1px solid #ccc;
margin-top: 10px; padding: 10px;
transition: all 500ms;
}
</style>
</head>
<body>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
<input id="inp"/>
<button ng-click="ekle()">Ekle</button>
<hr>
<div ng-repeat = "sebze in sebzeler" class="kutu">
{{sebze}}
</div>
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", ["ngAnimate"]);
uygulama.controller("ngKontrol", function($scope){
$scope.sebzeler = ["Patates", "Domates", "Patlıcan", "Sarımsak"];
$scope.ekle = function(){
var deger = document.getElementById("inp").value;
$scope.sebzeler.push(deger);
}
});
</script>
</body>
</html>
Örnekteki kod, önceki örneklerde de yaptığımız ve nasıl çalıştığını anlattığımız basit bir ng-repeat örneği. Burada ngAnimate modülü ile yapabileceklerimiz şunlar;
Giriş Animasyonu: Yeni eklenen objeler, listeye girerken bir CSS animasyonuna sahip oıur, bunun için kullanılacak class adı ise ng-enter olacak.
Önceki kodumuzdaki < style > < /style > etiketleri arasindaki kodumuza şu kod parçasını ekleyelim;
.kutu.ng-enter {
transition: all 300ms;
opacity: 0;
background-color: green;
}
Kodun son hali;
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.6.8/angular-animate.js"></script>
<style>
.kutu {
border: 1px solid #ccc;
margin-top: 10px; padding: 10px;
transition: all 500ms;
}
.kutu.ng-enter {
transition: all 300ms;
opacity: 0;
background-color: green;
}
</style>
</head>
<body>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
<input id="inp"/>
<button ng-click="ekle()">Ekle</button>
<hr>
<div ng-repeat = "sebze in sebzeler" class="kutu">
{{sebze}}
</div>
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", ["ngAnimate"]);
uygulama.controller("ngKontrol", function($scope){
$scope.sebzeler = ["Patates", "Domates", "Patlıcan", "Sarımsak"];
$scope.ekle = function(){
var deger = document.getElementById("inp").value;
$scope.sebzeler.push(deger);
}
});
</script>
</body>
</html>
Css tanımlamasını eklersek, yeni eklenen array elementlerinin opaktan pak'a ve arka plan rengi yeşilden beyaza doğru animasyonlu şekilde geldiğini görürürüz.
Not: Bu animasyonu sağlamak ngAnimate modülü olmadan Javascript ile biraz karışık ve zaman alıcı olacaktı. Özellikle bu tür animasyonlarda çokça kullanılır.
Çıkış Animasyonu: Eğer array listesinde programatik olarak ekle fonksiyonumuzda olduğu gibi bir element siliyorsak, bu elementin silinişini view üzerinde ngAnimate ile animasyon katabiliriz. Bu animasyon tanımı için ng-leave class adını kullanıyoruz.
.kutu.ng-leave {
animation: 300ms kaldirAnim;
}
@keyframes kaldirAnim {
from {
opacity:1;
background:red;
}
to {
opacity:0;
background:white;
}
}
Kodun Sonucu;
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.6.8/angular-animate.js"></script>
<style>
.kutu {
border: 1px solid #ccc;
margin-top: 10px; padding: 10px;
transition: all 500ms;
}
.kutu.ng-enter {
transition: all 300ms;
opacity: 0;
background-color: green;
}
.kutu.ng-leave {
animation: 300ms kaldirAnim;
}
@keyframes kaldirAnim {
from {
opacity:1;
background:red;
}
to {
opacity:0;
background:white;
}
}
</style>
</head>
<body>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
<input id="inp"/>
<button ng-click="ekle()">Ekle</button>
<hr>
<div ng-repeat = "sebze in sebzeler" class="kutu">
{{sebze}}
</div>
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", ["ngAnimate"]);
uygulama.controller("ngKontrol", function($scope){
$scope.sebzeler = ["Patates", "Domates", "Patlıcan", "Sarımsak"];
$scope.ekle = function(){
var deger = document.getElementById("inp").value;
$scope.sebzeler.push(deger);
}
});
</script>
</body>
</html>
Bu kod ile eğer array'de bir element kaldırılırsa, kaldrılan element kalkmadan önce keyframe ile tanımladığımız kırmızıdan beyaza animasyon ile kalkacak.
Yer Değiştirme Animasyonu: Listede yer değiştiren iki elementin her ikisi için de uygulanacak animasyonu tanımlar. Ng-move class ismi ile stil veya animasyon ataması yapılabilir.
ngAnimate Kullanılabilicek Direktifler
ngAnimate, AngularJS'in birçok direktifi ile uyumlu çalışabilir. Direktiflerin küçük bir listesini ve desteklediği animasyon tiplerini tablo olarak paylaşalım.
Direktif Desteklenen Animasyon Class Adları;
ngRepeat => ng-enter, ng-leave, ng-move
ngView => ng-enter, ng-leave
ngInclude => ng-enter, ng-leave
ngSwitch => ng-enter, ng-leave
ngIf => ng-enter, ng-leave
ngClass => ng-add, ng-remove
ngHide & ngShow => ng-hide
Bu tablodaki animasyonları direktifleri kullanarak uygulayıp, hem direktif kullanımlarını hem de animasyonlarını pekiştirebilirsiniz.
Not: Tablodaki ng-add ve ng-remove class adları, bir DOM elementine eklenen class'ın eklenmesi veya kaldırılması durumunu temsil eder.
Burada çokça kullanılabilecek bir diğer animasyon olan ngswitch direktifi için nasıl animasyon yapabileceğimizi göstermek istiyorum. Tab değiştirildiğinde animasyonlu şekilde gelmesi durumunu şu örnek animasyon ile gerçekleştirebiliriz;
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.6.8/angular-animate.js"></script>
<style>
.kutu {
border: 1px solid #ccc;
background:#fff;
margin-top: 10px; padding: 10px;
transition: all 500ms;
position:absolute;
width:calc(100% - 40px);
}
.kutu.ng-leave {
animation: 500ms cikAnim;
}
@keyframes cikAnim {
from {
top:0px;
}
to {
top:100%;
}
}
</style>
</head>
<body>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
<button ng-click="degistir(1)">Tab1</button>
<button ng-click="degistir(2)">Tab2</button>
<button ng-click="degistir(3)">Tab3</button>
<hr>
<div ng-switch="tabDegis">
<div class="kutu" ng-switch-when="t1">
Tab1 İçeriği
</div>
<div class="kutu" ng-switch-when="t2">
Tab2 İçeriği
</div>
<div class="kutu" ng-switch-when="t3">
Tab3 İçeriği
</div>
</div>
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", ["ngAnimate"]);
uygulama.controller("ngKontrol", function($scope){
$scope.tabDegis = "t1";
$scope.degistir = function(t){
$scope.tabDegis = "t" + t;
}
});
</script>
</body>
</html>
Örneğimizde, önceki örneklerde yaptığımıza benzer ng-switch ile bir tab sistemi oluşturduk. Burada, değişen tablar için, ekrandan çıkan tab değerine bir animasyon vererek, eski tab elementini aşağı düşüren bir animasyon oluşturduk.
Not: Kendi uygulamanızda animasyonlar, CSS ve sizin hayal gücünüz ile sınırlı. Bir çok farklı kombinasyon kullanılabilir.
Posted on Utopian.io - Rewarding Open Source Contributors