网页转换策略答案

【问题标题】：Strategies for web page transitions网页转换策略
【发布时间】：2018-10-23 10:41:59
【问题描述】：

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

所以我的问题是：

我搜索传统样式转换是否有误？
这些元素转换有什么基本正确的吗？
是否可以进行这些元素类型转换以容纳严肃的内容？

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

【问题讨论】：

你在寻找类似this的东西
是的，我是！确切地。您会看到转换，但您也可以看到 url 也发生了变化。非常感谢 Akash。
我注意到关于“真实”页面转换的一件事是它们经常闪烁白色，或者在应用转换之前短暂显示未格式化的内容。 Q1 的原因是由于时间/页面加载问题，实际页面转换是否存在根本缺陷。
这是“真实”页面的问题。您可能已经注意到此插件上的白色背景闪烁。但我认为根据过渡，您可以解决这些问题。就像你想要淡出/淡入过渡一样，你总是可以让闪光灯在淡出和淡入之间不被注意到。
你可以使用 iframe；问题是是否值得付出额外的努力。您需要加载两次页面内容，同步背景实例的滚动，经过所有这些努力，您会得到许多用户甚至不会注意到的东西。（但可以肯定，如果光学完美很重要，这是一种可行的方法。）

标签： javascript html transition

【解决方案1】：

听起来您发现了使用页面转换的单页面应用程序 (SPA)。 SPA 使用单个 HTML 文件并使用 JS 更改页面内容，部分框架为React、Ember、Angular

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

【讨论】：

感谢您的意见亨利。非常感激。 Visual Studio 允许我添加五个不同的 Angular 模块，所以也许我会在那里找到我的解决方案。顺便说一句，我在上面向 Akash 提到过“真实”页面过渡闪烁白色，或在过渡前短暂显示未格式化。因此，Q1 是由于时间/页面加载问题，实际页面转换是否存在根本缺陷。我不是一个真正的网络程序员，所以为我的天真道歉。一切顺利 - 彼得
您可以设置正文颜色背景，但过渡前闪烁白色的问题很可能是浏览器加载页面的方式（首先显示白屏）或者您正在使用 JS 进行过渡？如果是这样尝试 CSS，它会得到更好的优化，并且可以解决这个问题。您是否还查看了web manifest 来设置背景颜色？希望这会有所帮助
谢谢亨利。我会调查的。我确定这是可以解决的。
我意识到这是后来的事情，你可能已经解决了这个问题，但我想更新我的答案。与其使用预建的 SPA，不如使用fetch api 来获取您想要的下一页。在加载此页面时，您可以淡出当前页面，使用 history api 将下一个 url 推送到历史记录，然后将正文替换为您刚刚获取的下一页

【解决方案2】：

如果您采用上述 Akash 建议的方法，则页面转换“闪烁”问题的解决方案是：

将页面加载期间在白色背景上“闪烁”的所有深色元素着色为白色
将用作线条的深色图像（例如，通常设置为 100% 的 1px 图像）设置为 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>

页面加载后元素恢复其正确属性，没有闪烁。速度如此之快，以至于淡入、放大等功能仍然可以很好地工作。

【讨论】：