Chrome，Firefox和Opera中的CSS转换问题，但IE中没有

Question

In my web application, I want to animate switching between two elements. The old element should disappear by sliding off to the left and fading out at the same time, after which the new element appears by sliding in from the right while fading in.

Please see this fiddle: http://jsfiddle.net/mtKaz/8/

I am trying to use CSS transitions for the animation. Everything works fine on first iteration, however once an element has been hidden once, the transition for the appearing element stops working: the appearing element just snaps in, without any motion or fading.

I am experiencing this problem in Chrome, Opera Next and Firefox, but not in IE10. Am I doing something wrong or is this a bug in all browsers but IE (a most bizarre notion)?

The issue seems to be related to show() / hide() , since there is no problem if I set the elements to position: absolute and remove the show() / hide() calls.

JavaScript:

var currentDiv = "div2";

$(function(){
    $('#btn').click(function(){
        var newDiv = currentDiv == 'div1' ? 'div2' : 'div1';
        var oldDiv = currentDiv;

        // Start transition for the disappearing div
        $('#' + oldDiv).css({ opacity: 0, left: -100 });

        // Prepare the new div for showing by first moving it to the right
        // There will be a transition here as well, but it won't be visible
        $('#' + newDiv).css({ opacity: 0, left: +100 });

        setTimeout(function(){
            // Once the transition is done, hide the div so it doesn't occupy space
            $('#' + oldDiv).hide();
            // Show the new div and immediately start its appearing transition
            $('#' + newDiv).show().css({ opacity: 1, left: 0 });
        }, 1000);

        currentDiv = newDiv;
    });    
});

CSS:

.myDiv {
    position:relative;
    transition: left 1s, opacity 1s;
    width: 200px;
}

HTML:

<div id="div1" class="myDiv" style="display:none">
    hello, this is some text
</div>
<div id="div2" class="myDiv" style="display:none">
    and here is some more text
</div> 

Answer 1

There are issues with animating elements, which start with the attribute display: none. Wait for the complete callback of show() and then set the css properties.

$('#' + newDiv).show(400, function(){
$(this).css({ opacity: 1, left: 0 });
});

See documentation for details: http://api.jquery.com/show/#show-duration-complete