如何在两个HTML页面之间实现过渡效果。

Question

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

下面的链接只有DIV过渡效果，而不是页面过渡效果。是否可以在HTML页面之间使用相同的过渡效果？ 如何在两个HTML页面之间添加过渡效果？

- Karthikeyan

---

可能是如何在两个HTML页面之间添加转场效果？的重复问题。 - Hash

我该如何在两个HTML页面之间添加过渡效果？这些链接只提供了在div之间的过渡效果，那么是否有可能实现HTML页面的过渡效果呢？@Hash - Karthikeyan

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. 当您点击链接时，页面主体会淡出，并在半秒后浏览器会跳转到下一个页面

祝愉快编程！

- maxpaj

Answer 2

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

- Vipin Kumar