JavaScript-Animationen werden nicht in Reihenfolge ausgeführt?

Wenn ich darauf klicke, möchte ich eine Schaltfläche, um drei untergeordnete Optionen zu erzeugen, die dann, wenn sie erneut angetippt werden, zurückziehen und dann verschwinden, wenn sie sich hinter der übergeordneten Schaltfläche befinden. Ich hoffe, das ist klar aus dem Code (beachten Sie, dass dies eine nativescript Anwendung ist, daher die etwas seltsame CSS-Optionen).JavaScript-Animationen werden nicht in Reihenfolge ausgeführt?

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

Doch wie Sie von der gif, auf der Rückfahrt sehen können, verschwinden die Tasten kurz vor der Rückkehr. Was kann ich tun, um sicherzustellen, dass dies der Reihe nach geschieht?

Quelle

2016-04-10 George Edwards

Warum müssen Sie 'google.style.visibility' einstellen (ich sehe nicht, dass Sie es auf die gleiche Weise einstellen, wenn Sie sie erscheinen lassen)? Hast du versucht, diese Zeilen zu entfernen? –

Sie dies zu tun:

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

sofort nach den Animationen beginnen, nicht die Animationen Zeit, um zu laufen, bevor Sie es tun.

Wenn Sie warten möchten, verwenden Sie entweder einen Rückruf für die Animationen oder verzögern Sie 500 ms.

Ich weiß nicht, welche Animationsbibliothek Sie verwenden, daher kann ich kein Beispiel für einen Rückruf anzeigen, der auf alle drei wartet.

Hier ist die "nur 500ms warten" Version, aber:

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

Quelle

2016-04-10 13:48:27

Ich bin mir ziemlich sicher, dass das genau das Problem ist, aber das setTimeout macht mich nervös. Was passiert, wenn der Benutzer seine Maus zufällig nach dem Zufallsprinzip bewegt und sehr schnell für einige Sekunden auf alle Symbole klickt? – vahanpwns

@vahanpwns: In der Tat gibt es auch hier * andere * Probleme. Wenn der Benutzer wiederholt klickt, müssen die laufenden Animationen (und der ausstehende Timer abgebrochen werden, wenn dafür kein Animationsrückruf verwendet wird - was ich tun würde). –

Sie wahrscheinlich diese mit Übergängen leicht tun könnten. Verwenden Sie statt der Sichtbarkeit die Deckkraft, um die Schaltflächen ein- und auszublenden. Oder Sie können Ihrem JS einen Überblendungs-End-Listener hinzufügen und die Sichtbarkeit nur auf Zusammenklappen einstellen, nachdem die drei Registerkarten unter die Hauptschaltfläche zurückgekehrt sind. Ich denke, Ihr Problem versucht, die Sichtbarkeit zu animieren.

Quelle

2016-04-10 13:52:15 Frank

Da die blauen Kreise hinter der roten liegen, können Sie die Skala zwischen 0,95 und 1 animieren, nur damit die blauen Kanten nicht hinter dem Rot hervortreten. dann können Sie Sichtbarkeit oder sogar Deckkraft vergessen – vahanpwns

JavaScript-Animationen werden nicht in Reihenfolge ausgeführt?

Antwort

Verwandte Themen