dalgalı animasyonu

Question

üretir. Bulduğum şey, bir seferde animasyon yaparken, pürüzsüz ve kesintisiz. Ancak birden fazla animasyon yaparken, bunlar dalgalı ve kararsız hale gelir.

Bu işleri

var fadeToNextImg = function() { 
    var nextImg = imageHandler.getNextImage(); 
    $animate.addClass(curImage, 'ng-hide'); 
    $animate.removeClass(nextImg, 'ng-hide'); 
    curImage = nextImg; 
}; 

Ancak animasyon düzensiz sonuçlar üretir: Aynı anda, (hepsi bir yönergede olur) bir örtüşen görüntü kararma ederken İşte, içinde bir resim solma için kullanıyorum kodudur. Görüntüler düzgün bir şekilde solmaz ve kaybolmaz, bunun yerine sadece görünürler veya bazen görüntülerden biri söner. Ancak eğer animasyonlar tek bir seferde olur, böylece daha sonra her iki animasyonlar mükemmel excecute ben yuva, bu nedenle gibi diğer ardına hakkı: harika

var fadeToNextImg = function() { 
    var nextImg = imageHandler.getNextImage(); 
    $animate.addClass(curImage, 'ng-hide', function() { 
     $animate.removeClass(nextImg, 'ng-hide'); 
     curImage = nextImg; 
    }); 
}; 

.. istediğim adil değil istenen etki. Bir resim diğer tarafın üzerinde sorunsuzca kaybolurken bir resmin kaybolmasını istiyorum! Yanlış bir şey mi yapıyorum? Yoksa bu Angular Animate kütüphanesinde bir hata/performans sorunu mu?

farkında olmak başka bir şey, ben de bir direktifin dışında bu kullanarak JQuery DOM işlemleri çalıştı ve animasyon kusursuzdu. Onu sadece bir direktife taşıdım çünkü işlerin açısal yolu budur. Öyleyse neden animasyonlarımı havaya uçuruyor?

Answer 1

$animate'u kullanmadan önce, gördüğünüz birincil konu, $animate.addClass(...)'un, bir kez 'AS' 'olduğunu belirttikten sonra' 'bir' 'vermesidir. Bu, aşağıdaki animasyonların her birinin yalnızca önceki sözün geri çağrısı tamamlandıktan sonra etkinleştirilmesi gerektiği anlamına gelir (bu, resmin son olarak yüklenmesi anlamına gelir).

Başka bir şekilde, sahip olduğunuz şekilde, $animate.addClass(..)'unuz hemen/ardışık olarak yürütülür ve bir öncekinin çirkinliği eritmesini beklemeyin. Ayrıca, sahip olduğunuz gibi, ben ng-hide çalışacağına inanmıyorum. Belki de bir görüntüdeki son css durumunuz 'soluk' ve sonraki görüntüdeki başlangıç ​​css durumu 'soluk' gibi görünüyor. Bu durumda, options nesnesini, çeşitli ve css durumlarına işlemek için addClass(...)'a geçirmeniz gerekebilir. $animate vaadi Geri aramada then nasıl kullanılacağına dair bazı kaba yalancı kod:

var fadeToNextImg = function() { 

    var nextImg = imageHandler.getNextImage(); 
    var promise = $animate.addClass(curImage, 'endfade'); 

    promise.then(function(results){ 
    $animate.removeClass(...) 
    curImage = nextImg; 
    }); 

}