Temporarily disable menu animation

ionic-v1
1

Is there a built-in way to temporarily disable the animation of a menu?

Here’s my workflow: users open a menu on a main screen, click an item within that menu to navigate to a full-screen template, then navigate back to the main screen. I’d like the menu from which they navigated to still be open when they land. I currently pass in the information regarding which side should be open using routeParams and toggle that side using $ionicSideMenuDelegate.toggle(Left/Right), but don’t want the animation to occur in that specific instance.

I see the disableAnimation method in the source code as part of the sideMenuCtrl, but am unclear on how to apply it dynamically.

Thanks!

2

In case anyone runs into the same issue, here was my solution: make a custom directive on the ion-side-menu-content element. Here’s the code: (apologies, formatting’s a little off because of the forum)

.directive('transitionCheck', function($stateParams, $timeout) {
  return {
    restrict: 'A',
    link: function(scope, element, attr) {
      if($stateParams.menuState) {
        element.addClass('no-animation')
        $timeout(function() {
          element.removeClass('no-animation')
        }, 100);
      }
    }
  };
});

Edit: Forgot to mention that this is assuming you have a CSS property called ‘no-animation’ that overrides the default animation – mine looks like the following:

.menu-animated.no-animation {
webkit-transition: none !important;
moz-transition: none !important;
transition: none !important;
}

2 Likes