CODEWITHSUNDEEP
ionic-frameworktransition
user439781
user439781

Reputation: 131

Ionic page transitions

Im having a hard time understanding how Ionic handles ion-nav-view vs. ion-view. I'm trying to build an app where the views are not nested (as example apps). This is what I've done

  1. In index.html I have an ion-nav-view
  2. I have 3 pages. 1 login, 1 list, and 1 item (item is a list item beeing clicked)
  3. My list page is an ion-side-menus while the other 2 are ion-view's

Now to my question

When I click an item in my list I get a transition to my item page but when I go back to my list there is no page transition. This is the HTML

 <ion-header-bar class="bar-dark">
   <div class="buttons">

  <button nav-transition="slide-left-right" class="button button-icon button-clear ion-android-arrow-back" ui-sref="list">
</div>
    <h1 class="title">Item</h1>

</ion-header-bar>

How can I get transitions to work even though each page is its own ion-view?

EDIT I solved the "transition back" using nav-direction="back"

Next problem is that transition only works ones from the list?

If i click the above the slide left transition occurs, but if I go back and press it again I don't get a transition? Is it some sort of cache?

Upvotes: 1

Views: 1629

Answers (1)

Jad Salhani
Jad Salhani

Reputation: 490

The way I do is to have ion-side-menus inside index.html as the only directive, and inside it and with an ion-nav-view inside.

Then define an ion-side-menu with side="left" and include the list you want to show. That way you can define a side-menu that will show throughout the whole app and be available with all the content you need.

Now to answer your question, I think the list page (in your case the one with ion-side-menus) does not have transition when going back because it is now an ion-view. The page transitions occur on ion-views when they are swapped in-out inside the . But the ion-side-menus page is not swapped in-out it's just there.

Regarding this:

EDIT I solved the "transition back" using nav-direction="back"

It worked because you explicitly told ionic that you want a nav-transition when going back.

Hope this helps a bit

Upvotes: 2

Related Questions