javascript - 使用 MooTools 平滑淡入整个网页

Question

我想在所有元素加载完成后淡入整个网页。网页包括从左到右重复的背景图像，以及带有一些文本和图片的主要内容区域。我假设我应该在 CSS 中将主体不透明度设置为 0，并使用 JavaScript 代码淡入页面。

我必须使用 MooTools，更具体地说，是 1.2.6 版，因为该库已经链接到该页面(出于多种原因，不应升级到更新的版本)。

其中一位 StackOverflow 专家建议将此 MooTools 片段作为解决方案:

window.addEvent('load', function() {
  $$('body').set('morph', {duration: 300}).morph({'opacity': '1'});
});

问题:出于某种原因，代码段没有在页面中平滑淡入淡出，而是让背景立即出现，然后，大约一秒钟后，页面弹出，没有任何淡入淡出-有效。很可能是我做事不对。

如果有知识渊博的人给我一些建议，我将不胜感激。

Answer 1

您的问题的答案是执行以下操作。

删除样式表中的 CSS opacity:0; 并使用根据您的调整后的代码

我从 300 增加到 3000，以秒为单位从 .3seconds 到 3seconds。

链接:

window.addEvent('load', function () {

    $$('body').fade('hide').set('morph', {
        duration: 3000
    }).morph({
        'opacity': '1'
    });


});

展开:

window.addEvent('load', function () {

    var el = $$('body');

    el.fade('hide'); // hide body tag

    el.set('morph', {duration: 3000});

    $$('body').morph({'opacity': '1'});


});

注意事项:

我同意 LifeInTheGrey 关于不良做法的看法，但我说我会回答你的问题。