very simple JavaScriptjQuery example: unexpected evaluation order of instructions - Stack Overflow

admin管理员组

文章数量:1401673

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 / :

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 bees 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.

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/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 bees 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.

• javascript
• jquery
• css
• css-transitions

Share Improve this question Follow edited Oct 10, 2013 at 19:33 Bergi 666k161161 gold badges1k1k silver badges1.5k1.5k bronze badges asked Mar 3, 2013 at 13:39 Dr. Jan-Philip GehrckeDr. Jan-Philip Gehrcke 35.9k1414 gold badges8989 silver badges133133 bronze badges 6

• This is really fricking weird and possibly a browser bug. I updated the fiddle to use removeClass and put a debugger break before the first function. jsfiddle/Danack/u9X4m/4 If you step over the first function, then run the JS from there, everything works as you would expect. Without the debugger statement, there is the same weird animation effect that you're seeing. There is no code in removeClass to use any animation. I'm seeing this on Chrome btw. – Danack Commented Mar 3, 2013 at 14:07
• Chrome 25.0.1364.152 on mac - shows animation incorrectly. Safari 5.1.7 (6534.57.2) on mac - shows animation incorrectly. – Danack Commented Mar 3, 2013 at 14:11
• @abbood: I'm seeing an animation with Firefox 20 and Chrome 25 @ jsfiddle/zwatf/3 – Dr. Jan-Philip Gehrcke Commented Mar 3, 2013 at 14:11
• 1 @abbood Similarly, please can you say which browser you're not seeing any animation in? – Danack Commented Mar 3, 2013 at 14:12
• Opera does only show it when the classes are not applied on DOMready, but with a timeout: jsfiddle/zwatf/6 – Bergi Commented Mar 3, 2013 at 14:14

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 5

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.

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/zwatf/4/

(from the ments) Manually triggering a reflow also helps: http://jsfiddle/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/zwatf/5/

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
});

本文标签： very simple JavaScriptjQuery example unexpected evaluation order of instructionsStack Overflow