Ionic: slow transitions in installed android app

Question

I have installed an Ionic app (beta 14) on my Android (Lollipop) device using:

ionic platform add android
ionic run android

I have also manually built the app and installed it with adb.

The app uses ion-side-menus, and the animations for the transitions between simple views (list -> detail -> detail) are incredibly laggy on a capable phone. The animation when the side menu slides out is very smooth in contrast.

To further investigate the situation, I served the www directory from my dev machine and opened that page in Chrome on the phone and it was as smooth as one would expect. The app also runs smoothly on iOS devices.

Does anyone have any clues as to why it is so slow when the app is in Ionic, but performs as expected when it is just being rendered in the browser?

Answer 1

I faced with the same issue. It's worse in cases that you need to load a lot of information. In those occasion, I disable the transition effect by setting:

nav-transition=none

if you need to disable the transition from your controller, do the following:

app.controller('ctrl', function($scope,$state, $ionicViewSwitcher){ $scope.goBack = function(){
    $ionicViewSwitcher.nextTransition('none');
    $state.go('back');
});

Answer 2

I found some solutions by which I face problem in ionic app transitiosn..

1. After State Change I use this code..

//OnState Change..

$scope.$on('$stateChangeSuccess', function() {

    $ionicLoading.show();

   MyTeamListing();

  })

which hit serve every time when i change state.. which is slow down the app.

i just Remove first line and my code is working fine...

I don't know it is a good or bad way but its working for me fine..

Transaction is become slow if too much data is load on transaction so that I use ionic events which load data after transaction done.

$scope.$on('$ionicView.afterEnter', function(){
            console.log("afterEnter"); 
            $ionicLoading.show();
            loadRemoteData();
            $ionicLoading.hide();
});