My apologies if the title of this post and my interpretation of my problem is rather nebulous. I'm only a couple of weeks into learning Angular. Any help is appreciated.

I have a simple Angular app that consists of 2 views: an accordion menu with submenu items and a detail view. Clicking/tapping a submenu item results in a CSS transition (slideInRight) to the detail view...and Clicking/tapping the back button in the detail view results in a CSS transition (slideInLeft) back to the menu view. Everything works great on desktop.

The problem occurs when I test on my iPhone in an app generated via PhoneGap Build. Sometimes the transition happens and sometimes it just jumps to the appropriate view.

Here's a screen cap showing both views:

Menu ---> Detail

My app is defined as such:

var appName = angular.module('appName', ['ngRoute', 'ngAnimate', 'ngTouch']);

appName.config(['$routeProvider', function($routeProvider){
    $routeProvider.when('/menu', {
        templateUrl: 'views/menu.html',
        controller: 'MenuController'
    }).when('/detail/:itemId', {
        templateUrl: 'views/detail.html',
        controller: 'DetailController'
    }).otherwise({
        redirectTo:'/menu'
    });
}]);

I have two controllers, one for each view. In MenuController, I'm setting this class:

$scope.screenClass = 'menuScreen';

In DetailController, I'm setting this class:

$scope.screenClass = 'detailScreen';

And then the class is being applied in my index.html like this:

<body>
    <div class="portraitContainer">
        <div class="appScreen {{screenClass}}" ng-view></div>
    </div>
</body>

My CSS for the classes in question looks like this (I'm referencing animate.css):

.menuScreen.ng-leave{
    -webkit-animation:slideOutLeft 0.5s both ease-out;
    animation:slideOutLeft 0.5s both ease-out;   
}

.menuScreen.ng-enter {  
    -webkit-animation:slideInLeft 0.5s both ease-out;
    animation:slideInLeft 0.5s both ease-out;    
}

.detailScreen.ng-leave{
    -webkit-animation:slideOutRight 0.5s both ease-out;
    animation:slideOutRight 0.5s both ease-out;   
}

.detailScreen.ng-enter{  
    -webkit-animation:slideInRight 0.5s both ease-out;
    animation:slideInRight 0.5s both ease-out;   
}

Again, great on desktop. On iPhone, sometimes the transitions work...sometimes it just jumps to the selected view. So, has anyone run into this problem? I'm trying to identify if the problem is arising from my Angular noob status, my CSS, PhoneGap Build or iOS...or all four. Does anyone have any advice?

Thanks in advance, Bill

Related posts

Recent Viewed