Me sorprende el hecho de que una regla de transición CSS3 se aplique a través de jQuerydespués un cambio de propiedad CSS basado en jQuery en realidad anima este cambio de propiedad. Por favor, eche un vistazo ahttp://jsfiddle.net/zwatf/3/ :

Inicialmente, un div está diseñado por dos clases y tiene una cierta altura (200 px) debido a las propiedades CSS predeterminadas de estas dos clases. La altura luego se modifica con jQuery mediante la eliminación de una clase:

$('.container').removeClass('active');

Esto reduce la altura de 200px a 15px.

Después de eso, se aplica una regla de transición al contenedor mediante la adición de una clase:

$('.container').addClass('all-transition');

Lo que está sucediendo es que la reducción de la altura se anima (al menos en Firefox y Chrome). En mi mundo, esto no debería suceder si el orden de las instrucciones tiene algún significado.

Supongo que este comportamiento puede ser muy bien explicado. ¿Por qué está sucediendo eso? ¿Cómo puedo prevenirlo?

Esto es lo que quiero lograr:

modifica el estilo predeterminado con jQuery (no animado por la transición de CSS3)aplicar la regla de transición con jQuerycambiar una propiedad con jQuery (animado por la transición CSS3)

(1) y (2) deberían ocurrir lo más rápido posible, por lo que no me gusta trabajar con retrasos arbitrarios.