Question

我已经在网上搜索了网页过渡信息。传统上，内容的更改基于：index.html> nextpage.html。但是，我看到了一些非常不错的演示过渡，称为“网页过渡”，但几乎所有演示过渡都涉及页面元素的可视化操作，其性质为：old.element>过渡效果> new.element，而页面保持不变（即始终为index.html）。对我来说，这些并不是真正的页面过渡，因为这些演示不包含真实内容，仅包含一行左右。虽然它们看起来不错，但我看不到它们如何用于实际内容（例如150行代码，aspx对象，新的JS脚本，背后的代码等）

所以我的问题是：

我在搜索传统样式转换时是否错了？
这些元素转换是否有根本上正确的东西？
是否可以进行这些元素类型转换以包含重要内容？

第三季度的原因是，我无法想象说有十个页面的实际内容由单个default.aspx页面处理。还是我在这里想念什么？任何建议将不胜感激。最好的祝福-彼得

Answer 1

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

如果您不希望使用SPA，则可以在页面加载时使用CCS过渡来淡入页面，并在单击链接时淡出页面以在页面之间产生过渡效果

Answer 2

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

将在页面加载过程中针对白色背景“闪烁”的所有深色元素都设置为白色
将用作行的深色图像（例如，通常将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>

页面加载后，元素重新获得其正确的属性，而没有刷新。这是如此之快，以至于淡入，放大等仍然可以正常工作。

网页过渡策略

2 个答案: