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

【问题标题】：implement transition between two pages in HTML在 HTML 中实现两个页面之间的转换
【发布时间】：2021-06-16 23:19:21
【问题描述】：

我正在尝试使用此代码在 HTML 中的两个页面之间实现转换，我的问题是我不知道 javascript 的哪个部分指向 html 页面，我单击链接并得到一个空白屏幕。我希望看到当前页面在 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;
}

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

【问题讨论】：

标签： javascript html transition

【解决方案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;
}

&lt;li class="waves-effect" &gt;&lt;a onclick="transitionToPage('https://www.google.com')"&gt;open google&lt;/a&gt;&lt;/li&gt;

编辑：

如果您仍想使用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;
}

&lt;li class="waves-effect" &gt;&lt;a href="https://www.google.com" onclick="return transitionToPage(this)"&gt;open google&lt;/a&gt;&lt;/li&gt;

【讨论】：

你可以编辑让过渡滑出当前页面并滑入新页面吗？
“滑出”和“滑入”是什么意思？在重新加载之前将页面从右向左移动？还是只是将过渡添加到加载页面？
当前页面向左滑出，新页面从右侧滑入
请先尝试，然后如果您无法达到您想要的结果，请发布另一个问题来描述您面临的问题。如果您在此处评论问题的链接，我会尽力帮助您。