Плавно исчезают во всей веб-странице с помощью MooTools

Question

Я хочу добавить всю веб-страницу после завершения загрузки всех ее элементов. Веб-страница содержит фоновое изображение, повторяемое слева направо, и основную область содержимого с текстом и изображениями. Я предполагаю, что я должен установить непрозрачность тела на 0 в CSS, и использовать код JavaScript, чтобы исчезнуть на странице.

Я должен использовать MooTools, точнее, версию 1.2.6, потому что эта библиотека уже связана со страницей (и не должна обновляться до более новой версии по ряду причин).

Один из экспертов Stackru предложил этот фрагмент 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 о плохой практике, но я сказал, что отвечу на ваш вопрос.