Angular $animate

$animate

Animasyon hizmetini DOM elementler için destek sağlayan bir dizi ortaya çıkarır.

Kullanım Şekli

$animate.on('enter', container,
   function callback(element, phase) {
     // cool we detected an enter animation within the container
   }
);

Codepen Ön izleme

 

jQuery animate() Yöntemi

animate() Yöntemi;

CSS özelliklerine bir dizi özel animasyonlar gerçekleştirebilirsiniz. CSS özellikleri olarak width, height, border, color, background gibi bir çok değeri değiştirebilirsiniz.

Animasyonun süre ayarını yapmak için varsayılan değer 400 mili saniye üzerinden değerlendirilir. Yani 1 saniyelik bir animasyon için 1000 mili saniye vermeniz gerekmektedir.  Fonksiyon içerisine birden fazla animasyon yazılabilir.

Örnek

$(document).ready(function(){
    $(".büyüt").click(function(){
        $("div").animate({width: "400px"});
    });
    $(".kücült").click(function(){
        $("div").animate({width: "150px"});
    });
});

Codepen Ön izleme

Kullanım şekilleri;

.animate( properties [, duration ] [, easing ] [, complete ] )
.animate( properties, options )