AngularJS Animasyon

CSS yardımıyla AngularJS, animasyon geçişleri sağlar.

Animasyon nedir?

Animasyon, HTML öğelerinin değişimleri, size bir hareket yanılsaması yaratır.

örneği

Çerez kutusunu işaretleyerek DIV'i gizleyin:

<body ng-app="ngAnimate">
DIV'i gizlemek için çerez kutusunu işaretleyin:<input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>

Kendi Kendine Deneyin

Uygulamanızın dolu dolu animasyonlarla olmamalı, ancak bazı animasyonlar uygulamanızı daha anlaşılır hale getirebilir.

Ne gerekli?

Uygulamanızın animasyonlara hazırlanması için AngularJS Animate kütüphanesini içermelisiniz:

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

Sonra, uygulamanızda bu modülü referans almanız gerekecek. ngAnimate Modül:

<body ng-app="ngAnimate">

Eğer uygulamanızın adı varsa, ngAnimate Bağımlılığı uygulama modülüne ekleyin:

örneği

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

Kendi Kendine Deneyin

ngAnimate'in ne işi var?

ngAnimate sınıflar ekleyecek ve silecektir.

ngAnimate Bu modül, HTML elemanlarınızı animasyon haline getirmeyecektir, ancak ngAnimate Bazı olaylar (örneğin, HTML elemanlarının gizlenmesi veya gösterilmesi) olduğunda, bu eleman bazı önceden tanımlanmış sınıflara sahip olacak ve bu sınıflar animasyon yapımı için kullanılabilir.

AngularJS'te sınıf eklemek veya silmek için talimatlar şunları içerir:

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

ng-show ve ng-hide Talimat ekleyecek veya silecek ng-hide Sınıf değerleri.

Diğer talimatlar DOM'a girdiğinde ekler ng-enter Bu sınıf değerlerini ekleyecek ve DOM'dan silindiğinde ng-leave Öznitelikleri.

HTML elemanı konumunu değiştirdiğindeng-repeat Bu talimatlar ek olarak ng-move Sınıf değerleri.

Ayrıca, animasyon süreci boyunca HTML elemanları belirli sınıf değerlerine sahip olacak ve bu sınıf değerleri animasyonun tamamlanmasıyla silinecektir. Örneğin:ng-hide Bu talimatlar bu sınıf değerlerini ekleyecektir:

  • ng-animate
  • ng-hide-animate
  • ng-hide-add(Eğer elemanı gizlemek istiyorsanız)
  • ng-hide-remove(Eğer elemanı göstermek istiyorsanız)
  • ng-hide-add-active(Eğer elemanı gizlemek istiyorsanız)
  • ng-hide-remove-active(Eğer elemanı göstermek istiyorsanız)

CSS ile Animasyon İşleme

HTML elemanlarına animasyon efekti eklemek için CSS geçişleri veya CSS animasyonlarını kullanabiliriz. Bu eğitim, her ikisini de size gösterecektir.

CSS animasyonları hakkında daha fazla bilgi edinmek için, CSS Geçiş ve CSS Animasyonlar öğreticilerimizi öğrenin.

CSS Geçiş

CSS geçiş, belirli bir sürede bir CSS özniteliğinin değerini diğer bir değere yumuşak geçişi sağlar:

örneği

DIV elementi .ng-hide Saniye, yükseklik 100px'den 0:0'ye yumuşak geçiş yapacak.

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

Kendi Kendine Deneyin

CSS Animasyonları

CSS animasyonları, belirli bir sürede bir CSS özellik değerini diğerine pürüzsüz bir şekilde değiştirmenize olanak tanır:

örneği

DIV elementi .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>

Kendi Kendine Deneyin