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

Question

在我的网络应用程序中，我想要在两个元素之间切换动画。旧元素应该通过向左滑动同时淡出消失，然后新元素通过从右侧滑入同时淡入出现。

请看这个 fiddle :http://jsfiddle.net/mtKaz/8/

我正在尝试为动画使用 CSS 过渡。第一次迭代时一切正常，但是一旦某个元素被隐藏一次，出现的元素的过渡就会停止工作:出现的元素只是突然进入，没有任何运动或褪​​色。

我在 Chrome、Opera Next 和 Firefox 中遇到了这个问题，但在 IE10 中没有。我是不是做错了什么，或者这是除 IE 之外的所有浏览器中的错误(一个最奇怪的概念)？

这个问题似乎与show()/hide()有关，因为如果我将元素设置为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

动画元素存在问题，这些元素以属性 display: none 开头。等待 show() 完成回调，然后设置 css 属性。

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

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