Question

我构建了一个可在各个页面之间旋转的JavaScript插件。在进入下一页之前，不透明度会在1/2秒内更改。这部分似乎按预期工作。

function redirectPage(nextpage) {
    document.body.style.opacity = 0;
    document.body.style.transition = '500ms opacity';
    setTimeout(function (){
        window.location.href = nextpage;
        }, 500);
}

当显示下一页时，目的是继续前一页的零不透明度，并在接下来的1/2秒内转换为完全不透明度。我尝试了三种可能的解决方案，但收效甚微。

使用document.body.style将body不透明度更改为零。该插件的JavaScript位于head，因此在下载body之前执行，然后其他JavaScript位于body的末尾，允许{{1}在加载DOM之后应用。最初，我没有使用enableRotator回调，但由于没有DOMContentLoaded来应用样式，因此遇到了错误。即使在添加之后，也无法正常工作。看起来页面首先以完全不透明度显示，然后闪烁为零不透明度，然后在1/2秒内过渡到完全不透明度。谁知道为什么？
使用body编写一些CSS。最初的尝试导致了document.write。谁知道为什么？我发现将它移到Uncaught TypeError: Cannot read property 'style' of null at window.onload回调之外就消除了错误，但仍然遇到了与我第三次尝试相遇的缺点。
不是编写样式，而是在DOM中创建样式。此解决方案和之前的＃2解决方案都没有遇到解决方案＃1的闪烁，但不会在页面中进行转换，而是立即显示它。

如何在页面之间实现淡入和淡出？

DOMContentLoaded

页面加载之间平滑过渡

0 个答案: