javascript - ¿Puedo desactivar temporalmente todas las transiciones/animaciones CSS3 mientras se construye un elemento?

He creado un menú bastante complejo para un sitio web. El menú depende de una gran cantidad de animaciones basadas en CSS3. Sin embargo, cuando navego a una página diferente, el menú debería construirse inicialmente - y sin todas las animaciones, pero hecho con JS y no del lado del servidor.

Ahora me pregunto cómo podría desactivar completamente todas las transiciones/animaciones temporalmente, hasta que se construya el menú.

Pensé en crear una subclase que sobrescriba las animaciones, pero no parece funcionar, ya que siempre se utiliza la animación/transición definida en la clase base.

Respuesta #1

Sugeriría aplicar tus animaciones/transiciones mediante una clase que sea añadida por JavaScript después de que se construya el menú.

Existe la propiedad animation-play-state que puede pausar animaciones, pero eso solo apareció (con prefijo) en Safari 5 y Chrome 4 (a diferencia de Safari 4 y Chrome 2 para las otras propiedades de animación), y no estoy seguro de si funcionaría para tus propósitos.

Respuesta #2

Podrías establecer el transition-duration a 0s mientras construyes el menú y luego volver a ponerlo en el valor deseado después.