JavaScriptアニメーションが順番に実行されていませんか？

Question

クリックすると、3つの子オプションを生成するボタンが必要になります。このオプションは、再度タップすると元に戻り、親ボタンの後ろに消える必要があります。私はこれがコードからはっきりとしていることを願っています（これはnativescriptアプリケーションですので、少し奇妙なCSSの選択肢です）。あなたがGIFから見ることができるようにしかし

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

、帰路に、ボタンがちょうどリターンの前に姿を消します。これを順番にアニメートするにはどうすればよいですか？あなたはこれをやっている

Answer 1

：すぐ

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

あなたがそれを行う前に実行するアニメーションの時間を与えていない、アニメーションを起動した後。

待機したい場合は、アニメーションでコールバックを使用するか、500msだけ遅延させてください。

私はどのアニメーションライブラリを使用しているのかわかりません。そのため、3つすべてが完了するのを待っているコールバックの例を示すことはできません。

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

Answer 2

おそらく、トランジションで簡単にこれを行うことができます：ここでは

は、しかし、バージョン「だけで500msのを待つ」です。可視性を使用する代わりに、不透明度を使用してボタンをフェードインまたはフェードアウトしてみてください。または、JSにトランジション・リスナーを追加して、3つのタブがメイン・ボタンの下に戻った後で、折りたたみを表示するように設定することもできます。あなたの問題は可視性をアニメーション化しようとしていると思います。