角度-为什么/ in href停止闪烁？

Question

使用Angular的routeProvider作为模板引擎时，我的一个Web应用程序遇到了一些奇怪的行为。 尽管它起作用了，但是对我来说为什么起作用没有意义。

发生的情况是，在从页面到页面的转换过程中（主要是在safari / mobile safari中），您将在转换之前在视图的前面看到要转换为闪烁的页面。我如何解决此问题，只需在其中添加斜线即可。 href网址的末尾，例如： href="#/home/"而不是href="#/home 。有没有人知道为什么在网址中添加“ /”会解决此问题？

我这样设置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，则不会）。