网页转换策略

Question

我在网上搜索过网页转换。传统上，内容的更改基于：index.html > nextpage.html。然而，我看到了一些非常好的演示过渡，称为 "web page transitions" 但几乎所有演示都涉及页面元素的视觉操作，性质如下： old.element > 过渡效果 > new.element 而页面保持不变（即始终 index.html）。对我来说，这些并不是真正的页面转换，因为演示不包含真实内容——只有一行左右。虽然它们看起来不错，但我看不出它们如何适用于实际内容（比如 150 行代码、aspx 对象、新的 JS 脚本、隐藏代码等）

所以我的问题是：

我搜索传统风格转换是不是错了？
这些元素转换是否存在基本正确的内容？
这些元素类型转换可以容纳严肃的内容吗？

Q3 的原因是，我无法想象一个 default.aspx 页面可以处理十页真实内容。还是我在这里遗漏了什么？任何建议将不胜感激。最良好的祝愿 - 彼得

Answer 1

听起来您找到了使用页面转换的单页应用程序 (SPA)。 SPA 使用单个 HTML 文件并使用 JS 更改页面内容，一些框架是 React, Ember, Angular

如果您不想要 SPA，您可以在页面加载时使用 CCS 过渡来淡入页面并在单击链接时淡出页面以提供页面之间的过渡效果

Answer 2

如果您采用上面建议的 Akash 方法，页面转换 "flashing" 问题的解决方案是：

将页面加载期间 "flash" 在白色背景下的所有深色元素着色为白色
将用作线条的深色图像（例如，1px 图像通常设置为 100%）设为宽度 1px

在页面上加载这些元素要么与背景相同，要么太小以至于无法注意到。然后在页面准备好后将它们重置为正确的值：

<script>
    $(document).ready(function () {
        document.getElementById("change01").style.color = "#2E333C";
        document.getElementById("change02").style.color = "#2E333C";
        document.getElementById("change03").style.color = "#2E333C";
        document.getElementById("change04").style.color = "#2E333C";
        document.getElementById("change05").style.color = "#2E333C";
        document.getElementById("change06").style.color = "#2E333C";
        document.getElementById("change07").style.width = "100%";
    });
</script>

页面加载后元素重新获得正确的属性，没有闪烁。这太快了，淡入、放大等功能仍然可以正常工作。

网页转换策略

Strategies for web page transitions

html

javascript

transition