C'è un modo semplice per spostare un'immagine nascosta animata con zepto?

Question

Attualmente sto cercando di muovere un'immagine sullo schermo in determinati percorsi. Quando finisce uno, si nasconde, quindi si sposta di nuovo al punto di partenza per attendere l'input dell'utente e avviare il prossimo. Sto usando la funzione Anim in Zepto per entrambi, tuttavia sto notando che quando è stato animato mentre è nascosto, il programma si arresta in modo anomalo. Qualcuno può dirmi come posso sistemare questo, sia attraverso un modo diverso di spostarlo o qualcosa che devo fare con Anim ()?

Grazie per l'aiuto.

Answer 1

Cosa intendi per crash? Immagino che tu stia usando un callback quando la tua animazione si completa per attivare il passaggio successivo e stai usando entrambi display:none o visibility:hidden per nascondere il tuo elemento.

In questo caso, il problema che stai affrontando è che il callback dell'anim non spara quando non si verifica animazione. Il callback si basa sulla funzione WebKitTransitionend che si accende solo se si verifica una transizione. Queste transizioni non si verificano effettivamente per a) proprietà booleane come visibilità e b) oggetti completamente nascosti e che non vengono resi.

Il modo più semplice per superare questo sarebbe che la tua immagine non venga mai rimossa dal rendering, scomparendola usando opacity: 0 o cambiare il suo indice z per essere al di sotto di tutti gli altri elementi. In genere, quello che faccio è avere due stati: {opacity:1, zIndex: 10000} e {opacity:0, zIndex: -1}. In questo modo, quando l'oggetto è completamente sbiadito, non bloccherà altri elementi e svanirà senza intoppi. (Zindex da -1 a 1 si verifica a un'opacità molto bassa.)