How to animate between states that are not nested?

#1

I need to animate between 2 states that are not nested under each other.

I made a CodePen (http://codepen.io/patrickarlt/pen/kIDpA?editors=101) showing the behavior I want. Currently my 2 states are tabs.home and facts. I don’t want to nest facts under tabs but I would be ok with nesting things like app.tabs.home and app.facts.

Is there any better doc on this? All the animation related docs seem to be related to tabs which I don’t want.

#2

I think I understand that you want simple views (not tabs) that animate as you transition, correct?

If so, <ion-nav-view class="slide-left-right"> will handle the transition of the content area.

http://ionicframework.com/docs/api/directive/ionView/

<ion-nav-bar class="bar-positive nav-title-slide-ios7"> will handle the transition in the title.

http://ionicframework.com/docs/api/directive/ionNavBar/

#3

The demo I posted IS actually what I want.

  • A view that contains 3 tabs.
  • A second simple view
  • Animation between those views

In the code I posted http://codepen.io/patrickarlt/pen/kIDpA I have class="slide-left-right" on the <ion-nav-view> and still don’t see the views animating.

I have made a new CodePen that strips things down even more http://codepen.io/patrickarlt/pen/xuweJ but I still dont see the animation between the foo state (containing the tabs) and the bar state (the simple view).

#4

I’m not sure at what point this was supposed to change but going back to the old ion-nav-view animation attribute seems to work. So changing class to animation on your ion-nav-view like this.

<ion-nav-view animation="slide-left-right"></ion-nav-view>

@Calendee it might be worth getting the devs to check this out??

#5

As @scott pointed out, animation="slide-left-right" does the trick.

Here is a working sample:

However, that’s not supposed to be the case per the docs. Let me ask around about that.

#6

Thanks guys! animation="slide-left-right" totally works.

I’ll elaborate on WHY I wanted this pattern a little more.

In the app I’m working on we have 3 tabs. 2 of those tabs have list views that then have detail views. I think the default experience with tabs is a little confusing because when users are on a detail view they can still switch to other tabs which seems a little strange. I wanted a more iOS style experience where the detail view animates in and covers the tabs. This means that the user HAS to hit the back button to get back to the tab and cant switch to other tabs while looking at a detail view which I think is cleaner.

I made yet another CodePen http://codepen.io/patrickarlt/pen/jFCnt/ that is pretty accurate to what I want. Transitions are working but now the page transitions only happen every other time. To duplicate click “Go to Bar” (no transition) then “Go to Home” (no transition) then “Go to Bar” (transition) and “Go to Home” (transition). Transitions continue to work every other time.

This is exactly what @perrygovier is seeing in Page transition animation fires every other time which he figured was a bug in nested <ion-nav-view>s or in how <ion-tabs> transitions to and from pages that aren’t its children.

Is this a bug? I feel that I have a pretty minimal test case that proves something weird is going on.

#7

Understand about the tab states.

I’ve changed your sample to use the nightly. The “every other” problem does exist there too. http://codepen.io/calendee/pen/fJxaq

Definitely seems like a bug to me. Opened Issue # 1142 : https://github.com/driftyco/ionic/issues/1142

#8

Great I’ll track this on the Github issue.

Thanks for being so responsive!

#9

I Have some issue related to sliding in I phone , I don’t want sliding effect only route between view by back button that I want on Iphone no-animation not working on Iphone