Animacje JavaScript nie działają w kolejności?

Question

Po kliknięciu przycisku chcę produkować trzy opcje dziecięca, czyli wtedy kiedy powinien ponownie wykorzystać nie chowa, a następnie znikają, gdy za pomocą przycisku macierzystego. Mam nadzieję, że jest to jasne z kodu (zauważ, że jest to aplikacja nativescript, stąd nieco dziwne wybory css).

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; 
} 

Jednak, jak widać z gif, w drodze powrotnej, przyciski po prostu zniknąć przed powrotem. Co mogę zrobić, aby zapewnić animację w sekwencji?

Answer 1

Robisz tak:

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

natychmiast po rozpoczęciu animacje, nie dając czasu animacji uruchamiania, zanim to zrobisz.

Jeśli chcesz czekać, albo użyć wywołania zwrotnego na animacji, lub po prostu opóźnienie 500ms.

nie wiem co animacja lib używasz, więc nie mogę pokazać przykład zwrotnego czeka na wszystkich trzech do zrobienia.

Oto wersja „po prostu czekać 500ms”, ale:

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

Answer 2

Można prawdopodobnie to zrobić łatwo z przejściami. Zamiast korzystać z widoczności, spróbuj użyć krycia, aby zanikać przyciski i pomniejszać. Lub możesz dodać przejściowy odbiornik końcowy do swojego JS i ustawić tylko widoczność, aby zwinąć po tym, jak trzy karty zostały przeniesione z powrotem pod główny przycisk. Myślę, że twój problem polega na próbie animowania widoczności.