Navigation transition occurs twice

1

I have a side menu page defined like this :

<body>
  <ion-side-menus>
    <ion-side-menu-content>
      <ion-nav-bar class="bar-positive">
         <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
      </ion-nav-bar>
     <ion-nav-view animation="slide-in-right"></ion-nav-view>
    </ion-side-menu-content>
<ion-side-menu side="left">
 <ion-header-bar class="bar-assertive">
<h1 class="title">Menu</h1>
</ion-header-bar>
 <ion-content>
<div class="list side-menu-list">
<a class="item item-icon-left" ui-sref="home" menu-toggle="left">
<i class="icon ion-home"></i>
Home
</a>
<a class="item item-icon-left" ui-sref="help" menu-toggle="left">
<i class="icon ion-help-circled"></i>
Help
</a>
<a class="item item-icon-left" ui-sref="exit" menu-toggle="left" ng-click="exitApp()">
<i class="icon ion-power"></i>
Exit
</a>
</div>
 </ion-content>
</ion-side-menu>
</ion-side-menus>
<! -- scripts -->
</body>

Now to handle the states I have set up a router like this;

.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('home', {
        url: "/home",
        templateUrl: "templates/home.html"
    })
   .state('help', {
        url: "/help",
        templateUrl: "templates/help.html",
        controller: "HelpController"
    });

  $urlRouterProvider.otherwise("/home");
}

And here are my templates files inside templates folder

<! --home.html  -->

<ion-view title="HOME">
    <ion-content class="padding">
        <h1>I am Home</h1>
    </ion-content>
</ion-view>

Same is help.html

Now for the problem part. When I navigate to home or help using the links from the side menu the page body always ends up sliding twice from left. The header bar behaves normal. But the body of the page slides twice and then comes into rest.

For example when I am in home.html and click on “HELP” in the side menu then the body of the page 'help' which is "I AM HELP" slides twice from left then comes into rest.

Basically event is not stopping. Bubbling phase is firing twice. How can I solve this?

I had similar problem with JQM and I used to solve it with event.stopImmediate.Propogation(). How do I do it here with Ionic and AngularJS.

Or is there any other solution or am i doing something wrong.

2

You should take a look at the codepen sample for sidemenu and navigation. I tried to reproduce your errors, but your code pen provided in this post is broken and doesn’t provide enough information.

http://codepen.io/ionic/pen/tcIGK

3

Look at this and tell me

4
5

I do not need those nested views that you have mentioned. The example that I have listed hear works perfectly on desktop. The problem is that when I move to mobile (Android 4.2.2) I see that dual transition problem. And I want to ask you this. Looking at the above code that I have posted, do you see any problem in that? If so what and how should I correct it? And what do you think I have to do better ?

6

I will try a few more things. If nothing works out I will send you the apk file itself. Then you might be able to help me.

7
8

@mhartington The problem was with the animation. I tried different animation for the ion-nav-view and now there are no problems. But now when I changed the animation I am stuck with this : Glitches on top of the popup when used with certain page animations