javascript - Kann ich alle CSS3-Übergänge/Animationen vorübergehend deaktivieren, während ein Element erstellt wird?

Ich habe ein ziemlich komplexes Menü für eine Website erstellt. Das Menü lebt von einer großen Menge an Animationen, die auf CSS3 basieren. Wenn ich jedoch zu einer anderen Seite navigiere, sollte das Menü zunächst aufgebaut werden - und zwar ohne alle Animationen, aber mit JavaScript und nicht serverseitig.

Jetzt frage ich mich, wie ich alle Übergänge/Animationen vorübergehend vollständig deaktivieren könnte, bis das Menü erstellt ist.

Ich habe darüber nachgedacht, eine Unterklasse zu erstellen, die die Animationen überschreibt, aber es scheint nicht zu funktionieren, da immer die in der Basisklasse definierte Animation/Transition verwendet wird.

Antwort #1

Ich würde vorschlagen, Ihre Animationen/Übergänge über eine Klasse anzuwenden, die von JavaScript hinzugefügt wird, nachdem das Menü erstellt wurde.

Es gibt die Eigenschaft animation-play-state, die Animationen pausieren kann, aber diese erschien nur (vorgestellt) in Safari 5 und Chrome 4 (im Gegensatz zu Safari 4 und Chrome 2 für die anderen Animationseigenschaften), und ich bin mir nicht sicher, ob sie für deine Zwecke funktionieren würde.

Antwort #2

Sie könnten die transition-duration auf 0s setzen, während Sie das Menü erstellen, und sie danach wieder auf den gewünschten Wert zurücksetzen.