几天来我一直在尝试在两个不同 HTML 页面/文件(index.html -> about.html)之间添加动画。 html)。我的想法是在从一个页面转到另一页面时进行动画/过渡:在我的例子中，从 index.html 到 about.html 页面。
我在 Google 和 StackOverflow 上找到了很多答案，但问题是转换发生在同一页面，这意味着 HTML 两个页面的代码位于同一个文件中，并且我的 index.html 变得不可读，特别是当我正在处理一个相当大的项目时。
我发现 Google Photos 的功能与我想要实现的功能非常相似。只是open Google Photos并点击图片，您可能会注意到，网址更改，从 https://photos.google.com 更改为 https://photos.google.com/photo/PHOTO_ID 并且出现动画。
您知道 Google 如何做到这一点或我可以如何做到吗？ :) 任何帮助将不胜感激!
我宁愿避免的解决方案是:
- AJAX(但如果 Google 使用它也没关系，我怀疑他们会这样做)
- 将两个页面的
HTML保存在一个文件中。 - AngularJS(我更喜欢纯 JS)
(这不是重复的，我想知道 Google 是如何做到的；))
最佳答案
您可以使用 jQuery 将 HTML 文件加载到正文中。下面是一些非常未经测试的伪代码，用于使这个无骨的单页应用程序正常工作:
jQuery
//disable link action and load HTML inside the body tag
$('a').on('click', function(){
e.preventDefault();
$('body').load($(this).attr('href'));
}
HTML
<body>
<h1>title</h1>
<a href="about.html">link</a>
</body>
如果您想添加动画效果，可以在正文中添加新的 HTML，淡化以前的 HTML，然后删除隐藏的内容。
关于javascript - 改变 HTML 页面的动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49202794/