如何在两个html页面之间做过渡效果答案

【问题标题】：How to do transition effects between two html pages如何在两个html页面之间做过渡效果
【发布时间】：2017-11-20 11:56:19
【问题描述】：

我需要html页面之间的过渡效果，当点击菜单或子菜单时，页面会以过渡效果打开。请指导我，如何做到这一点，提前谢谢。

下面的链接只有 div 转换而不是页面转换。 html页面之间可以进行相同的转换吗？

How I can add transitions between two HTML pages?

【问题讨论】：

How I can add transitions between two HTML pages?的可能重复
"如何在两个 HTML 页面之间添加过渡？"这些链接，只在div之间进行转换，同样可以做html页面转换吗？ @哈希

标签： javascript jquery html css

【解决方案1】：

这是一个需要一些 CSS 和 Javascript 知识的解决方案：

在您的 DOM 中，您可以在其中放置指向其他页面的链接，而不是使用 <a> 标签，而是使用普通的 <span> 并附加一个 onclick 属性，如下所示：

<span onclick="transitionToPage('https://www.google.com')"></span>

（可以使用<a>和href，但需要解析出目标href并防止出现默认事件。）

然后在您的 Javascript 中，输入以下代码：

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
})

最后，在您的 CSS 代码中：

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

这将产生以下效果：

页面加载时，正文将在半秒内淡出
当您单击链接时，正文将淡出，半秒后浏览器将转到下一页

编码愉快！

【讨论】：

【解决方案2】：

您可以随时隐藏body 的内容，然后通过 JQuery 将其淡化。但这仅适用于进入页面的情况。如果您想在离开页面添加动画，那么您必须使用单页应用程序，您可以在其中添加两个级别的过渡。

【讨论】：