¿Puedo desactivar temporalmente todas las transiciones/animaciones de CSS3 mientras se crea un elemento?

He creado un menú bastante complejo para un sitio web. El menú vive de una gran cantidad de animación que se basa en CSS3. Sin embargo, cuando navego a una página diferente, el menú debería crearse inicialmente, y sin todas las animaciones, pero hecho en JS y no en el lado del servidor.¿Puedo desactivar temporalmente todas las transiciones/animaciones de CSS3 mientras se crea un elemento?

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

Pensé en crear una subclase que anule las animaciones, pero parece que no funciona, ya que siempre está la animación/transición definida en la clase base que se está utilizando.

Fuente

2011-11-29 SquareCat

Potencialmente relevante: http://stackoverflow.com/questions/11131875/what-is-the-cleanest-way-to-disable-css-transition-effects-temporarily –

Sugiero aplicar sus animaciones/transiciones a través de una clase que se agrega por JavaScript después de que se construye el menú.

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

Fuente

2011-11-29 13:21:01

Tengo la sensación de que tiene toda la razón. Y tengo esta sensación de alegría increíble de no haber pensado en esto antes de escribir esas 2.500 líneas. Todavía sueño con una solución más fácil. – SquareCat

Sé lo que quieres decir. No estoy seguro de si es más fácil: podría eliminar la clase en cuestión mediante JavaScript cuando el menú comience a generarse, y volver a agregarla una vez que haya terminado. (Aunque si hay otros estilos en la clase además de la animación, también los perderías). –

Sí, ese es el punto. Es bastante complejo. Lo que generalmente es un misterio para mí, es por qué no es posible establecer una transición/animación con una nueva clase y así poder anular una que se haya definido antes. Si eso fuera posible, por ejemplo, una transición de "desvanecimiento" podría cronometrarse de manera diferente que la transición de "aparecer" (cuando se establece desde la opacidad 0-1 y reversa) – SquareCat

Puede configurar el transition-duration en 0s mientras construye el menú y luego establecerlo nuevamente en el valor deseado.

Fuente

2012-07-03 13:11:00 Jasper

¿Puedo desactivar temporalmente todas las transiciones/animaciones de CSS3 mientras se crea un elemento?

Respuesta

Cuestiones relacionadas