javascript - Posso desativar temporariamente todas as transições/animações CSS3 enquanto um elemento está sendo construído?

Eu criei um Menu bastante complexo para um site. O menu depende de uma grande quantidade de animações que são baseadas em CSS3. No entanto, quando eu navego para uma página diferente, o menu deveria ser construído inicialmente - e sem todas as animações, mas feito via JS e não no lado do servidor.

Agora estou me perguntando como eu poderia desativar completamente todas as transições/animações temporariamente, até que o menu seja construído.

Pensei em criar uma subclasse que sobrescrevesse as animações, mas parece que não funciona, já que sempre é a animação/transição definida na classe base que está sendo usada?

Resposta #1

Eu sugeriria aplicar suas animações/transições através de uma classe que é adicionada pelo JavaScript depois que o menu é construído.

Existe a propriedade animation-play-state que pode pausar animações, mas ela só apareceu (com prefixo) no Safari 5 e Chrome 4 (em oposição ao Safari 4 e Chrome 2 para as outras propriedades de animação), e eu não tenho certeza se ela funcionaria para os seus propósitos.

Resposta #2

Você poderia definir o transition-duration como 0s enquanto constrói o menu e depois defini-lo de volta para o valor desejado.