Question

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

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

我在Chrome，Opera Next和Firefox中遇到此问题，但在IE10中不。我做错了什么，或者这是所有浏览器中的错误，但IE（一个最离奇的概念）？

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

JavaScript的：

hide()

CSS：

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

HTML：

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

Answer 1

动画元素存在问题，以属性display：none开头。等待show（）的完整回调，然后设置css属性。

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

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

Chrome，Firefox和Opera中的CSS过渡问题，但不是IE

1 个答案: