在 HTML 中实现两个页面之间的转换

Question

我正在尝试使用此代码在 HTML 中实现两个页面之间的转换，我的问题是我不知道 javascript 的哪个部分指向 html 页面，我点击 link 并得到一个空白屏幕。我希望看到当前页面在 500 秒后淡出，然后新页面以相同的时间淡入，这里是代码

<!DOCTYPE html>
<html>
<body>
 <li class="waves-effect" ><a href="Netbeans_1.html" onclick="transitionToPage('https://www.google.com')">2</a></li>
<script>
window.transitionToPage = function(href) {
    document.querySelector('body').style.opacity = 0
    setTimeout(function() { 
        window.location.href = href
    }, 500)
}

document.addEventListener('DOMContentLoaded', function(event) {
    document.querySelector('body').style.opacity = 1
})
</script>
</body>
<html>

然后在我的 css 文件中，我有这个

body { 
   opacity: 0;
   transition: opacity .5s;
}

第一页淡出很好，但第二页是纯白色请帮忙...

window.transitionToPage = function(href) {
    document.querySelector('body').style.opacity = 0
    setTimeout(function() { 
        window.location.href = href
    }, 500)
}

document.addEventListener('DOMContentLoaded', function(event) {
    document.querySelector('body').style.opacity = 1
})

body { 
   opacity: 0;
   transition: opacity .5s;
}

<li class="waves-effect" ><a href="Netbeans_1.html" onclick="transitionToPage('https://www.google.com')">2</a></li>

Answer 1

唯一的问题是 <a> 的默认行为是立即重定向到 href，如果您删除它并且只在 onclick 事件中调用您的函数，它就可以工作。（我增加了淡入淡出以显示得更好）。

window.transitionToPage = function(href) {
    document.querySelector('body').style.opacity = 0;
    setTimeout(function() { 
        window.location.href = href;
    }, 2000);
};

document.addEventListener('DOMContentLoaded', function(event) {
    document.querySelector('body').style.opacity = 1;
});

body { 
   opacity: 0;
   transition: opacity 2s;
}

<li class="waves-effect" ><a onclick="transitionToPage('https://www.google.com')">open google</a></li>

编辑：

如果您仍想使用 href 属性，您可以通过在 onclick 事件上返回 false 来覆盖 <a> 标记的默认行为。例如：

window.transitionToPage = function(link) {
    document.querySelector('body').style.opacity = 0;
    setTimeout(function() { 
        window.location.href = link.href;
    }, 2000);
    return false;
};

document.addEventListener('DOMContentLoaded', function(event) {
    document.querySelector('body').style.opacity = 1;
});

body { 
   opacity: 0;
   transition: opacity 2s;
}

<li class="waves-effect" ><a href="https://www.google.com" onclick="return transitionToPage(this)">open google</a></li>

在 HTML 中实现两个页面之间的转换

implement transition between two pages in HTML

javascript

html

transition