Animation control on ion-nav-view (is reverse animation automatically added?)

ionic-v1
1

Hi,

I’m having some issue with the animation on .

I started my app with the ionic side menu template and I want to swipe to go visit my next or previous song in my playlist. So it the playlist detail page, I added the following code:

<ion-content class="has-header"  on-swipe-right="swipToPrevious()" on-swipe-left="swipToNext()">

In the controller I’m updating the data based on different gestures and everything works fine. However, I have some trouble with the slide animation added to the <ion-nav-view> directive. Seems like Ionic is smart to automatically added a reverse class to reverse the animation if I’m swiping to the opposite direction, but not always. This is causing some issue that the page will slide to the opposite direction when swipe the page.

Since the same animation also controls other views, I’m not sure if it’s a good idea to remove it. I’m wondering if there is a way for me to control the way it’s injecting the reverse class? Or what method I could use to add animation when calling my swipToPrevious() and swipToNext() function?

Route:

 .state('app', {
      url: "/app",
      abstract: true,
      templateUrl: "templates/menu.html",
      controller: 'AppCtrl'
    })

    .state('app.groups', {
      url: "/group",
      views: {
        'menuContent' :{
          templateUrl: "templates/group.html"
        }
      }
    })
    .state('app.playlists', {
      url: "/playlists",
      views: {
        'menuContent' :{
          templateUrl: "templates/playlists.html",
          controller: 'PlaylistsCtrl'
        }
      }
    })

    .state('app.single', {
      url: "/playlists/:playlistId",
      views: {
        'menuContent' :{
          templateUrl: "templates/playlist.html",
          controller: 'PlaylistCtrl'
        }
      }
    });

SideMenu HTML:

<ion-side-menus>
  <ion-pane ion-side-menu-content>
    <ion-nav-bar class="bar-stable"  >
    </ion-nav-bar>
    <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
  </ion-pane>

  <ion-side-menu side="left">
    <header class="bar bar-header bar-stable">
      <h1 class="title">MyApp</h1>
    </header>
    <ion-content class="has-header">
      <ion-list>
        <ion-item nav-clear menu-close ui-sref="app.playlist">
          Playlist
        </ion-item>
        <ion-item nav-clear menu-close ui-sref="app.groups">
          Groups
        </ion-item>
        <ion-item nav-clear menu-close ng-click="login()">
          Log out
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

Thanks in advance!

Kikyou

2

Can you put an example of this into a codepen?

3

Sure, I just opened one here
So if you click on any single in the playlists page, you will be able to see the single detail page. The animation problem occurs when you swipe to go next/previous single. It’s a pretty random issue. You might need to click and swipe couple times to see the issue.

Thanks!

4

So I got the error, if you start on anything other than one, and tried to swipe right, then the error comes. Seems that the logic that you are using to determine the songs index is getting thrown off.

Have you tried looking at $index? This will play alot better with ng-repeat. Maybe be worth a shot

5

Thanks for checking in.

I actually logged index number in console every time I swipe and the number looks fine. I assume the logic is right? I couldn’t find a more detailed documentation for animation, so I’m curious if ionic is automatically injecting that reverse class if I’m swiping the opposite direction?

I’ll try with $index and see how it goes.

6

So I’m trying $index, I couldn’t find good way to use it.

My Playlist page and Single page have its own controller, and I didn’t use ng-repeat on the Single page. I’m grabbing the single id from url and use the id to determine the song index using Services. So I’m not sure I could still use $index in my Single page. Also I’ve tested my logic couple times, I think it should be right?

Any other suggestions?

Thanks!

7

Did you able to resolve this issue ?