Question

我最近一直想知道如何实现特定类型的导航功能。即，当你点击＆＃34;了解更多＆＃34;对于本网站上的任何功能https://pageproof.com/或返回主页，它不会导致页面重新加载，但只是出现在“重新定位”页面上。视口到另一页面。然而，Back＆amp;浏览器上的前进按钮仍然有效。这是怎么回事？在侧向动画之后，它只是链接上的setTimeout延迟，给人一种运动的错觉吗？或者它更复杂。我真的很感激这里的任何帮助！

Answer 1

很棒的问题。

在PageProof，我们使用angular.js作为我们的框架，但是我已经在我们所描述的网站上整理了一个完全普通的JavaScript版本的组件。

https://gist.github.com/jacobmarshall/bf94443c2294c555154b

我们的应用程序就是所谓的单页应用程序，我们选择使用popstate事件（历史记录api）作为我们的URL，而不是使用hashchange事件（hashchange api）。 / p>

这种方式的工作方式是，您必须拦截（并阻止）通常会导致浏览器刷新/重定向到另一个页面的任何事件。而是拨打history.pushState，您可以在script.js的第50行看到。执行此操作时，还需要将更新的内容加载到页面上的元素中。我们实现这一目标的方法是使用一个名为ngAnimate的模块，该模块复制视图元素，并在页面外设置旧模型，并将副本设置为页面上的动画。

ngAnimate允许我们通过向每个元素添加类来添加我们自己的动画，具体取决于它们是被删除还是被添加到页面中。动画完成后，旧元素将完全从页面中删除。

当您单击浏览器后退/前进按钮时，这一切都有效的原因是，每当URL更改时，popstate对象都会触发window事件。再次，当这种情况发生时，我们将内容加载回页面（就像我们拦截其他事件时那样）。

快速说明;我为你创建的例子可能只适用于Chrome，只是你知道。就这样，我只隔离了使这一切都发生的位和bob，而且没有额外的膨胀。

我们选择popstate而不是hashchange的原因之一是因为我们可以使用popstate完全控制整个网址，而hashchange只允许您更改哈希后的URL段。因此，我们会获得像pageproof.com/dashboard这样的精美网址，而不是pageproof.com/#/dashboard。

我注意到您没有将自己的问题标记为angularjs，但只是想要查看它，我们使用$locationProvider.html5Mode(true)启用所有popstate内容。

Answer 2

window.onhashchange = function(e) {
  var what = window.location.hash.substring(1);
  //what gives you the #subnav from url http://someurl.com/#subnav
}

function callTosetHistory(){
var baseUrl = window.location.href.split('#')[0];
if(history.pushState)
    history.pushState({},'title','#subNav');
}

Answer 3

我在@teampageproof。我们使用AngularJS实现了这种效果。 Angular通过其$ routeProvider方法处理所有导航。我们只是简单地为视图设置动画以提供幻灯片效果。

event.preventDefault（）;导航，同时仍允许返回＆amp;要使用的前进按钮

3 个答案: