I'm encountering some strange behavior in one of my web apps when using Angular's routeProvider as a template engine. Although it works, it doesn't make sense to me why it works.
Whats happening is that during transitions from page to page (mostly in safari/mobile safari) you will see the page you're transitioning to flicker in the front of view before transitioning in. How I fixed this problem is just by adding a slash to the end of the href's url, ex:href="#/home/"
instead of href="#/home
. Does anyone out there know why adding a "/" to the url would fix such a problem?
I set up the routeProvider like this:
.config(function($routeProvider) {
$routeProvider.when('/home', {
controller : 'HomeCtrl',
templateUrl : './home.html'
}).when('/pageTwo', {
controller : 'twoCtrl',
templateUrl : './pageTwo.html'
}).otherwise({
redirectTo: '/home'
});
})
My html like this:
<ul id="nav">
<li>
<a href="#/home" class="bt-icon">HOME</a>
</li>
<li>
<a href="#/pageTwo" class="bt-icon">TWO</a>
</li>
</ul>
and css like this:
.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;
}