Question

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

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

How I can add transitions between two HTML pages?

Answer 1

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

Answer 2

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

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

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

然后在你的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;
}

这将产生以下效果：

当页面加载时，正文会褪色超过半秒
当您点击链接时，正文将淡出，半秒后浏览器将转到下一页

快乐的编码！

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

2 个答案: