html变化之间的过渡答案

【问题标题】：Transition between html changehtml变化之间的过渡
【发布时间】：2013-03-27 02:51:11
【问题描述】：

我有这两个功能，一个从页面中删除所有内容，一个将其添加回来。删除所有内容后，会显示一个黑色的屏幕，中间有一个加载徽标。

Base.showLoading = function () {
    var r = false;
    if (!$('body').hasClass('overlay')) {
        Obj.tempHtml = $('body').html();
        $('body').html('');
        $('body').addClass('overlay');
        r = true;
    }
    return r;
};

Base.hideLoading = function () {
    var r = false;
    if ($('body').hasClass('overlay')) {
        $('body').html(Obj.tempHtml);
        delete Obj.tempHtml;
        $('body').removeClass('overlay');
        r = true;
    }
    return r;
};

还有 CSS 类 overlay:

.overlay
{
    background-color: #111;
    background-position: center;
    background-image: url('../img/loading_black.gif');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}

现在，我如何才能在两者之间平稳过渡？

现在它只是直接进入黑屏并且看起来不正确。我不知道该怎么做。

JS/jQuery 或 CSS 解决方案都可以：)。虽然首选 CSS。谢谢:)

我知道这样做会删除所有绑定等，但我已考虑到这一点，hideLoading 就像从未使用过，所以是的 :)

【问题讨论】：

标签： javascript jquery css css-transitions transitions

【解决方案1】：

不要做 .html('') 和 .html(string)，只需分离元素。

Base.showLoading = function () {
    var r = false;
    if (!$('body').hasClass('overlay')) {
        Obj.bodyElements = $('body').children().fadeOut(200);
        Obj.bodyElements.promise().done(function(){
            Obj.bodyElements.detach();
            $('body').addClass('overlay');
        });        
        r = true;
    }
    return r;
};

Base.hideLoading = function () {
    var r = false;
    if ($('body').hasClass('overlay')) {
        $(Obj.bodyElements.get()).appendTo('body');
        $('body').removeClass('overlay');
        $('body').children().fadeIn(200);
        r = true; 
    }
    return r;
};

我还添加了如何使用.fadeOut(200) 进行转换

【讨论】：

太棒了。不知道你能做到。
似乎不起作用 D：Obj.bodyElements has no method 'detach'
@SmartLemon 确实，我犯了一个错误。更正...已修复。
您可以记录 Obj.bodyElements 以确保它包含应有的内容吗？在 hide 和 show 方法中
它是一个数组，包含对象。我认为它适用于“淡出”的风格......

【解决方案2】：

利用 CSS3 过渡：

body {
    -webkit-transition: 0.5s background ease;
    -moz-transition: 0.5s background ease;
    -o-transition: 0.5s background ease;
    transition: 0.5s background ease;
}

【讨论】：

【解决方案3】：

不要将 body 设置为具有覆盖类。

相反，创建一个覆盖主体的 div，它始终具有该类。该类应具有“显示：无；”

当你想杀死你的页面时，你可以使用 jQuery 来做到这一点：

$('#overlay').show(500);

然后您可以替换下面的内容，您可能想要这样做，在覆盖显示后，然后隐藏覆盖，如下所示：

$('#overlay').show(500, function() {
    // replace the page contents here
}).hide(500);

【讨论】：