Angular Animations and Phonegap not running on mobile

Question

I've added a few ng-view animations (angular v 1.1.5) to a phonegap app. They work great in the browser when testing both using ripple and when pointing the mobile phone's browser (android chrome in this case) to the app online, but when installed with phonegap, the animations do not run. I'm not sure if the issue is with phonegap or with angular. At first I thought it was just animating too fast so I slowed them down to 1.5s but it made no change in the app.

Is this a phone gap issue, an angular issue and/or how can we use these?

CSS defined animation:

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

.view-enter {
  opacity:0;

}
.view-enter.view-enter-active {

  opacity:1;
}

.view-leave {

  opacity:1;
}
.view-leave.view-leave-active {
  left:-100px;
  opacity:0;
}

Again these work great in the phone's browser, just not when it is inside the phonegap app. Using Adobe build to build the app. I also am fetching the css and displaying on the page just to confirm the actual css file is included in the phonegap build (it is).

Per one of the user's comments, here is the HTML. The rest is handled by angular's default animations. They work fine when run in a browser but not when run inside phonegap. The routing works, the ng-view is changed, but the animation never occurs.

   <div class="container-fluid" id="viewer" ng-view ng-animate="{enter: 'view-enter', leave: 'view-leave'}" >


     </div>

Tested on Nexus 4.

Answer 1

You might look into CocoonJS (works with Cordova) or Crosswalk as paths to speed up all manner of browser-related slowness when deploying on older Android.