How to suppress ionic transition animations?


#1

When I try to suppress ionic animations, I get a blank screen. Is this the correct way to suppress ionic animations?

$ionicConfigProvider.views.transition('none');

#2

This is how you do it:

nameApp.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {

    $ionicConfigProvider.views.transition('none');

Or take a look at this tutorial for a working example. It’s suppressing classic animations to replace them with a native counterpart.


#3

Hmm, it seems like that’s what I have. I mean, I’m not doing “nameApp.config”, but that’s because I’m just chaining my functions, but that really shouldn’t make any difference right? Here is my code–do I have anything written incorrectly?

angular.module('myApp', ['ionic', 'ngMaterial', 'ngCordova'])
.directive('goNative', ['$ionicGesture', '$ionicPlatform', function($ionicGesture, $ionicPlatform) {
  return {
    restrict: 'A',
 
    link: function(scope, element, attrs) {
 
      $ionicGesture.on('tap', function(e) {
 
        var direction = attrs.direction;
        var transitiontype = attrs.transitiontype;
 
        $ionicPlatform.ready(function() {
 
          switch (transitiontype) {
            case "slide":
              window.plugins.nativepagetransitions.slide({
                  "direction": direction
                },
                function(msg) {
                  console.log("success: " + msg)
                },
                function(msg) {
                  alert("error: " + msg)
                }
              );
              break;
            case "flip":
              window.plugins.nativepagetransitions.flip({
                  "direction": direction
                },
                function(msg) {
                  console.log("success: " + msg)
                },
                function(msg) {
                  alert("error: " + msg)
                }
              );
              break;
               
            case "fade":
              window.plugins.nativepagetransitions.fade({
                   
                },
                function(msg) {
                  console.log("success: " + msg)
                },
                function(msg) {
                  alert("error: " + msg)
                }
              );
              break;
 
            case "drawer":
              window.plugins.nativepagetransitions.drawer({
                  "origin"         : direction,
                  "action"         : "open"
                },
                function(msg) {
                  console.log("success: " + msg)
                },
                function(msg) {
                  alert("error: " + msg)
                }
              );
              break;
               
            case "curl":
              window.plugins.nativepagetransitions.curl({
                  "direction": direction
                },
                function(msg) {
                  console.log("success: " + msg)
                },
                function(msg) {
                  alert("error: " + msg)
                }
              );
              break;              
               
            default:
              window.plugins.nativepagetransitions.slide({
                  "direction": direction
                },
                function(msg) {
                  console.log("success: " + msg)
                },
                function(msg) {
                  alert("error: " + msg)
                }
              );
          }
 
 
        });
      }, element);
    }
  };
}])
.run(function($ionicPlatform, $rootScope, $state) {
  $ionicPlatform.ready(function() {
    // then override any default you want
    window.plugins.nativepagetransitions.globalOptions.duration = 250;
    window.plugins.nativepagetransitions.globalOptions.iosdelay = 350;
    window.plugins.nativepagetransitions.globalOptions.androiddelay = 250;
    window.plugins.nativepagetransitions.globalOptions.winphonedelay = 350;
    window.plugins.nativepagetransitions.globalOptions.slowdownfactor = 4;
    // these are used for slide left/right only currently
    window.plugins.nativepagetransitions.globalOptions.fixedPixelsTop = 0;
    window.plugins.nativepagetransitions.globalOptions.fixedPixelsBottom = 0;
        
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
});

  // UI Router Authentication Check
  $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams) {
    if (toState.data && toState.data.authenticate && !userService.isLoggedIn()){
      $state.transitionTo("login");
      event.preventDefault(); 
    }
  });
})
.config(function($stateProvider, $urlRouterProvider, $cordovaFacebookProvider, $ionicConfigProvider) {
  $ionicConfigProvider.views.transition('none');

  var appID = 123456789;
  var version = "v2.0"; // or leave blank and default is v2.0
  $cordovaFacebookProvider.browserInit(appID, version);
  
  $stateProvider
      .state('login', {
        url: '/login',
        templateUrl: 'views/login.html',
        controller: 'LoginCtrl',
        data: {
          authenticate: false
        }
      })
      .state('home', {
        url: "",
        abstract: true,
        controller: 'HomeCtrl',
        templateUrl: "views/home.html"
      })       
      .state('home.items', { 
        url: '/items/:id?a',
        views: {
          'homeContent' :{
            templateUrl: "views/items.html",
            controller : "ItemsCtrl"
          }
        },
        data: {
          authenticate: true
        }        
      })   

      $urlRouterProvider.otherwise('/login');
  });