Home » Angularjs » Angular Animations and Phonegap not running on mobile

Angular Animations and Phonegap not running on mobile

Posted by: admin November 30, 2017 Leave a comment

Questions:

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.

Answers:

This is definitely an issue with Android 4.2’s stock browser. The first clue is that it works fine on desktop and in Chrome, but not in Phonegap — InAppBrowser uses Android’s stock browser.

Support for animations (and HTML5 in general) was pretty terrible in Android 4.2. Here’s a handy rundown of those quirks.

Hopefully you’ve been able to upgrade your Android version since June!

Questions:
Answers:

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.