How to combine Side Menu and Nav Router for animations

ionic-v1
1

Hi everybody,

I’m currently developing my first app with Ionic and Angular.
At the moment I’m puzzled how to correctly combine Side Menu
Nav Router and animations. My app looks like following.

<body ng-app="app">
  <side-menus>
  <!-- Center content -->
  <pane id="navRouter" side-menu-content nav-router animation="slide-left-right-ios7">
    <ng-view></ng-view>
  </pane>

  <!-- Left menu -->
  <side-menu side="left" ng-controller="NavPanelCtrl">
  <header class="bar bar-header bar-dark">
    <div>
        Header
    </div>
  </header>
  <content has-header="true">
    <div class="list">
      <a ng-click="nav('item_route')" class="item ">
           Item
      </a>
<div>

The nav() method toggles the side menu and changes the location.

My issue is that, when the the side menu is open and a user selects the item,
this results in two overlapping animations one from toggling the menu and one from the nav router.

If I remove 'animation=“slide-left-right-ios7” from the router the side menu works fine, but If navigate within a view ( so from a template loaded into ), then there is no animation, whereas one is intended.

Are there best practices how to get the best both?
I.e. no animation (beside toggling the menu) when navigating from the side menu
and animations when navigating from main content areas.

Thanks in advance!
Best regards
Norman

2

Hey Norman,

Another user had a similar issue, and solved it by setting the background color to white on the content area: Page text overlaps at page transitions

This is something we have that we need to fix. Thanks!