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

Question

我需要在 html 页面之间进行过渡效果，当单击菜单或子菜单时，将打开具有过渡效果的页面。 请指导我如何操作，在此先感谢。

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

How I can add transitions between two HTML pages?

Answer 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;
}

这将产生以下效果:

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

编码愉快!