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

Question

在我的Web应用程序中，我希望动画化两个元素之间的切换。 老元素应通过向左滑动并同时渐出而消失，此后，新元素通过渐入时从右侧滑动而出现。

请查看此小提琴： http : //jsfiddle.net/mtKaz/8/

我正在尝试对动画使用CSS过渡。 在第一次迭代中一切正常，但是一旦元素被隐藏一次，出现元素的过渡就停止工作：出现元素只是捕捉，没有任何运动或褪​​色。

我在Chrome，Opera Next和Firefox中遇到此问题，但在IE10中却没有 。 我是在做错什么还是这是除IE（最奇怪的概念）以外的所有浏览器中的错误？

这个问题似乎与show() / hide() ，因为如果将元素设置为position: absolute ，则没有问题position: absolute并删除show() / hide()调用。

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

动画元素存在一些问题，这些问题始于属性显示：无。 等待show（）的完整回调，然后设置css属性。

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

有关详细信息，请参见文档： http : //api.jquery.com/show/#show-duration-complete