Posso disattivare temporaneamente tutte le transizioni/animazioni CSS3 mentre viene creato un elemento?

Ho creato un menu piuttosto complesso per un sito web. Il menu vive di un'enorme quantità di animazione basata su CSS3. Tuttavia, quando navigo in una pagina diversa, il menu dovrebbe iniziare inizialmente - e senza tutte le animazioni, ma fatto JS-saggio e non serveride.Posso disattivare temporaneamente tutte le transizioni/animazioni CSS3 mentre viene creato un elemento?

Ora mi chiedo come sia possibile disabilitare completamente tutte le transizioni/animazioni temporaneamente, fino a quando il menu non viene creato.

Ho pensato di creare una sottoclasse che sovrascriva le animazioni ma non sembra funzionare, in quanto è sempre l'animazione/transizione definita nella classe base che viene utilizzata?

fonte

2011-11-29 SquareCat

Potenzialmente rilevante: http://stackoverflow.com/questions/11131875/questo-è-il-destinato-del-del-disabile-css-transizione-effetti-temporaneamente –

Suggerisco di applicare le animazioni/transizioni tramite una classe aggiunta da JavaScript dopo la creazione del menu.

C'è la proprietà animation-play-state che può sospendere le animazioni, ma che è apparsa solo (prefissata) in Safari 5 e Chrome 4 (a differenza di Safari 4 e Chrome 2 per le altre proprietà di animazione), e non sono sicuro se funzionerebbe per i tuoi scopi.

fonte

2011-11-29 13:21:01

Ho la sensazione che tu abbia assolutamente ragione. E ho questa sensazione di incredibile gioia di non aver pensato a questo prima di scrivere quelle 2.500 righe. Sogno ancora una soluzione più facile però. – SquareCat

So cosa intendi. Non sei sicuro che sia più semplice: puoi rimuovere la classe in questione tramite JavaScript quando il menu inizia a creare e riaggiungerla dopo averla completata. (Anche se ci sono altri stili nella classe oltre all'animazione, si perderebbero anche quelli.) –

Sì, questo è il punto. È piuttosto complesso Ciò che generalmente è un mistero per me, è il motivo per cui non è possibile impostare una transizione/animazione con una nuova classe e quindi essere in grado di sovrascrivere quella che è stata definita in precedenza. Se ciò fosse possibile, per esempio una transizione "fade" potrebbe essere temporizzata in modo diverso rispetto alla transizione "compare" (quando si imposta da opacità 0-1 e inversa) – SquareCat

È possibile impostare transition-duration su 0s durante la creazione del menu e quindi riportarlo al valore desiderato in seguito.

fonte

2012-07-03 13:11:00 Jasper

Posso disattivare temporaneamente tutte le transizioni/animazioni CSS3 mentre viene creato un elemento?

risposta

Problemi correlati