JavaScript animasyonu sırayla çalışmıyor mu?

Question

Tıklandığında, üç çocuk seçeneği üretmek için bir düğme istiyorum. Bu, daha sonra yeniden başlatıldığında geri çekilmeli ve ardından ebeveyn düğmesinin arkasından kaybolur. Umarım bu açık koddan (bu bir nativescript uygulaması, bu nedenle biraz garip css seçimleri olduğunu unutmayın). Eğer gif gördüğünüz gibi Ancak

exports.fabTap = function (args) { 
    var google = page.getViewById("google"); 
    var facebook = page.getViewById("facebook"); 
    var amazon = page.getViewById("amazon"); 
    if (clicked == false) { 
     google.style.visibility = "visible"; 
     facebook.style.visibility = "visible"; 
     amazon.style.visibility = "visible"; 

     google.animate({ 
       translate: { x: -55, y: -66 }, 
       duration: 500, 
       curve: enums.AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1) 
     }); 
     facebook.animate({ 
       translate: { x: 0, y: -75 }, 
       duration: 500, 
       curve: enums.AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1) 
     }); 
     amazon.animate({ 
       translate: { x: 55, y: -66 }, 
       duration: 500, 
       curve: enums.AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1) 
     }); 
    } else { 
     google.animate({ 
       translate: { x: 0, y: 0 }, 
       duration: 500, 
       curve: enums.AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1) 
     }); 
     facebook.animate({ 
       translate: { x: 0, y: 0 }, 
       duration: 500, 
       curve: enums.AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1) 
     }); 
     amazon.animate({ 
       translate: { x: 0, y: 0 }, 
       duration: 500, 
       curve: enums.AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1) 
     }); 
     google.style.visibility = "collapse"; 
     facebook.style.visibility = "collapse"; 
     amazon.style.visibility = "collapse"; 
    } 

    clicked = !clicked; 
} 

, dönüş yolculuğunda, düğmeler sadece dönmeden önce kaybolur. Bu animasyonları sırayla sağlamak için ne yapabilirim? Bunu yapıyoruz

Answer 1

: Hemen

google.style.visibility = "collapse"; 
facebook.style.visibility = "collapse"; 
amazon.style.visibility = "collapse"; 

bunu yapmadan önce çalıştırmak için animasyonlar süre vererek değil, animasyonlar başladıktan sonra.

Beklemek istiyorsanız, animasyonlarda bir geri arama kullanın veya yalnızca 500 msn geciktirin.

Ben kullandığınız hangi animasyon lib bilmiyorum, bu yüzden her üç yapılması gereken bekleyen bir geri bir örneğini gösteremez.

Burada olsa, "sadece 500ms bekleyin" sürümü:

setTimeout(function() { 
    google.style.visibility = "collapse"; 
    facebook.style.visibility = "collapse"; 
    amazon.style.visibility = "collapse"; 
}, 500); 

Answer 2

Muhtemelen geçişlerle kolayca yapabiliriz. Görünürlüğü kullanmak yerine, düğmelerinizi açıp kapamak için opaklık kullanmayı deneyin. Ya da, JS'nize bir geçiş sonu dinleyicisi ekleyebilir ve yalnızca üç sekme ana düğmenin altına geri döndükten sonra görünmezliği ayarlayabilirsiniz. Bence senin problemin görünürlüğü canlandırmaya çalışıyor.