very simple JavaScript / jQuery example: unexpected evaluation order of instructions

Question

I am surprised by the fact that a CSS3 transition rule applied via jQuery after a jQuery-based CSS property change actually animates this property change. Please have a look at http://jsfiddle.net/zwatf/3/ :

Initially, a div is styled by two classes and has a certain height (200px) due to the default CSS properties of these two classes. The height is then modified with jQuery via removal of one class:

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

This reduces the height from 200px to 15px.

After that, a transition rule is applied to the container via addition of a class:

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

What is happening is that the reduction of the height becomes animated (on Firefox and Chrome, at least). In my world, this should not happen if the order of instructions has any meaning.

I guess this behavior can be very well explained. Why is that happening? How can I prevent it?

This is what I want to achieve:

1. modify default style with jQuery (not animated by CSS3 transition!)
2. apply transition rule with jQuery
3. change a property with jQuery (animated by CSS3 transition)

(1) and (2) should happen as quickly as possible, so I do not like working with arbitrary delays.

Answer 1

Why is that happening?

I guess because the DOM sees them applied together; immediate consecutive actions are usually cached instead of being applied one after the other.

How can I prevent it?

A (very small) timeout should do it: http://jsfiddle.net/zwatf/4/

(from the comments) Manually triggering a reflow also helps: http://jsfiddle.net/zwatf/9/

I do not like working with arbitrary delays.

Then I think the only other possible way is to remove the height from the animated css properties, i.e. you need to explicitly state which ones you wanted to animate: http://jsfiddle.net/zwatf/5/

Answer 2

When running a script, the browser will usually defer DOM changes to the end to prevent unnecessary drawing. You can force a reflow by reading/writing certain properties:

var container = $('.container').removeClass('active');
var foo = container[0].offsetWidth;  //offsetWidth makes the browser recalculate
container.addClass('all-transition');

jsFiddle

Or you can use setTimeout with a short duration, which does basically the same thing by letting the browser reflow automatically, then adding the class.

Answer 3

i think, it just happens too fast. if you do this:

$('.container').toggleClass('active',function() {
    $('.container').addClass('all-transition');
});

it will behave as you expected, right?

ok, fine, i tested it, but I didn't realize it didn't work as expected. Here an alternative to make it up:

$('.container').removeClass('active').promise().done(function(){
    $('.container').addClass('all-transition');

    $('.container').css('height','300'); //to see the easing
});