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

Question

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

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

如何在两个 HTML 页面之间添加过渡？

Answer 1

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

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

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

（您可以使用<a>and 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;
}

这将产生以下效果：

1. 页面加载时，正文会在半秒以上淡入淡出
2. 当你点击一个链接时，正文会淡出，半秒后浏览器将转到下一页

快乐编码！