Le animazioni JavaScript non sono in esecuzione in ordine?

Quando si fa clic, voglio un pulsante per produrre tre opzioni figlio, che poi quando toccato di nuovo dovrebbero rientrare e poi scomparire quando si trova dietro il pulsante genitore. Spero che questo sia chiaro dal codice (si noti che questa è un'applicazione nativizzata, quindi le scelte di css leggermente strane).Le animazioni JavaScript non sono in esecuzione in ordine?

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

Tuttavia, come si può vedere dalla gif, durante il viaggio di ritorno, i pulsanti scompaiono prima del ritorno. Cosa posso fare per garantire che questo si anima in sequenza?

fonte

2016-04-10 George Edwards

Perché è necessario impostare 'google.style.visibility' (non vedo che lo imposti nello stesso modo quando li stai facendo apparire)? Hai provato a rimuovere queste linee? –

Lo stai facendo:

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

subito dopo aver iniziato le animazioni, non dando il tempo per eseguire le animazioni prima di farlo.

Se si desidera attendere, utilizzare una richiamata sulle animazioni o solo ritardare 500 ms.

Non so quale lib di animazione stai usando, quindi non posso mostrare un esempio di una richiamata in attesa che tutti e tre siano eseguiti.

Ecco la versione "solo aspettare 500ms", però:

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

fonte

2016-04-10 13:48:27

Sono abbastanza sicuro che questo è esattamente il problema, ma il setTimeout mi rende nervoso. Cosa succede quando l'utente muove il mouse casualmente facendo clic in modo casuale su tutte le icone per alcuni secondi? – vahanpwns

@vahanpwns: In effetti, ci sono * altri * problemi anche qui. Se l'utente fa clic ripetutamente, è necessario annullare le animazioni in corso (e il timer in sospeso, se non si utilizza la richiamata di animazione per quello - che è ciò che farei). –

probabilmente si potrebbe fare facilmente con le transizioni. Invece di utilizzare la visibilità, prova a utilizzare l'opacità per dissolvere i pulsanti in entrata e in uscita. In alternativa, puoi aggiungere un listener di transizione al tuo JS e impostare la visibilità per comprimere dopo che le tre schede sono state spostate indietro sotto il pulsante principale. Penso che il tuo problema stia cercando di animare la visibilità.

fonte

2016-04-10 13:52:15 Frank

poiché i cerchi blu sono dietro quello rosso, è possibile animare la scala tra 0,95 e 1 solo per mantenere i bordi blu da spuntare da dietro il rosso. quindi puoi dimenticare la visibilità o anche l'opacità – vahanpwns

Le animazioni JavaScript non sono in esecuzione in ordine?

risposta

Problemi correlati