javascript - Angular-为什么/in href 停止闪烁？

Question

当使用 Angular 的 routeProvider 作为模板引擎时，我在我的一个网络应用程序中遇到了一些奇怪的行为。尽管它有效，但我不明白为什么它有效。

发生的事情是，在从一个页面过渡到另一个页面(主要是在 safari/mobile safari 中)时，你会看到你要过渡到的页面在过渡之前在 View 前面闪烁。我如何解决这个问题只是通过添加href 的 url 末尾的斜线，例如:href="#/home/" 而不是 href="#/home 。有没有人知道为什么要添加url 的“/”可以解决这样的问题吗？

我这样设置 routeProvider:

.config(function($routeProvider) {
    $routeProvider.when('/home', {
      controller : 'HomeCtrl',
      templateUrl : './home.html'
    }).when('/pageTwo', {
      controller : 'twoCtrl',
      templateUrl : './pageTwo.html'
    }).otherwise({
      redirectTo: '/home'
    });
  })

我的 html 是这样的:

<ul id="nav">
    <li>
        <a href="#/home" class="bt-icon">HOME</a>
    </li>
    <li>
        <a href="#/pageTwo" class="bt-icon">TWO</a>
    </li>
</ul>

和这样的CSS:

.view-animate-container {
    position:relative;
    width: 100%;
    height: 100%;
}
.view-animate {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-perspective: 1000;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.view-animate.ng-enter, .view-animate.ng-leave {
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}

.view-animate.ng-enter {
    opacity:0;
    -webkit-transform: translate3d(20%,0,0);
    transform: translate3d(20%, 0, 0);
}
.view-animate.ng-enter.ng-enter-active {
    display: block;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0, 0, 0);
    opacity:1;
}
.view-animate.ng-leave.ng-leave-active {
    -webkit-transform: translate3d(-20%,0,0);
    transform: translate3d(-20%, 0, 0);
    opacity:0;
}

Answer 1

链接到哈希而不是路由本身是否有原因？

您是否尝试过将链接更改为 <a href="/home">Home</a>而不是 href="#/home" ？

Angular 将为您管理散列(如果您的浏览器支持 pushState，则不会)。