更改 HTML 页面的动画

Question

几天来，我一直在尝试在两个 不同的 HTML pages/files（index.html -> about.html）。我的想法是 animate/have 从一页到另一页的过渡：在我的例子中是从 index.html 到 about.html 页面。

我在 Google 和 Whosebug 上找到了很多答案，但问题是转换发生在同一页面上这意味着两个页面的 HTML 代码在同一个文件中，我的 index.html 变成 unreadable ，特别是如果我正在从事一个相当大的项目。

我看到 Google 照片与我想要实现的目标非常相似。只需 open Google Photos 并点击一张图片，您可能会注意到，URL 由 https://photos.google.com 更改 ] 到 https://photos.google.com/photo/PHOTO_ID 并出现动画。

知道如何 Google 做到这一点或 我如何做到这一点 吗？ :) 任何帮助将不胜感激！

我宁愿避免的解决方案是：

AJAX（但如果 Google 使用它也没关系，我怀疑他们会这样做）
将两个页面的 HTML 放在一个文件中。
AngularJS（我更喜欢纯 JS）

(这不是重复的，我想知道 Google 是怎么做到的 ;))

Answer 1

您可以使用 jQuery 将 HTML 文件加载到正文中。这里有一些非常未经测试的伪代码使这个无骨，single-page-app工作：

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，然后移除隐藏的内容。

Answer 2

虽然我不确定 Google 用于实现此目的的方法，但我知道您想要避免的许多解决方案肯定是您的一些更好的选择。

无论如何，实现此目的的一种技巧是将代码拆分到两个页面中。在一个页面上单击 link 后设置淡入淡出 out/any 动画，并在目标页面上加载后使另一页淡出 in/any 动画。这有点类似于我使用 XML 请求的方式，只是有点偏离一般做法。

同样，这是一种非常 'hacky' 的方法，但它可以用非常少的 JavaScript 代码完成工作，具体取决于您的操作方式。

更改 HTML 页面的动画

Animation to changing HTML page

javascript

html

ajax

animation

google-photos