I'm developing a mobile app using AngularJS inside RhoMobile (although i'm pretty sure this issue is Angular-specific). The app is pretty much finished and at this point i'm trying to get css3 animations on page transitions. I've accomplished this the following way:
//Include the ngAnimate module
var MyApp = angular.module("CompasApp", ["ngRoute", "ngAnimate"]);
In my CSS:
.container.ng-enter,
.container.ng-leave {
-webkit-transition:0.25s ease-in-out all;
transition:0.25s ease-in-out all;
}
.container.ng-enter,
.container.ng-leave.ng-leave-active {
opacity:0;
}
.container.ng-leave,
.container.ng-enter.ng-enter-active {
opacity:1;
}
Now, in my index.html (where I include the templates), I use the "container" class:
<div class="container" data-ng-view id="slides"></div>
This gives me nice fade-out / fade-in animations on the views, but whenever I use the back button (tested in Android 4.1 and 4.4) to go back to a previous view, the transition starts with the content scrolled about 700px down (almost outside the visible area), and then quickly centers after the animation is finished.
This ONLY happens on the back button, if I access the view by clicking on links, it will animate perfectly. I suspect that this has to do with the fact that the back action triggers a full page reload, as if I would use window.location instead of angular's $location.path.
What would be the best strategy to avoid the full page reload on a back button press (considering that i'm using AngularJS in a framework aimed at native-ish mobile web apps)?
Thanks!