Beta14: Navigating to a page with ion-tabs doesn't have an transition animation

1

In all previous versions of Ionic, I would be able to transition from a non tab based page to a page with ion-tabs, and there would be a transition animation between states. However, since updating to Beta14, suddenly there is no animation anymore.

Please see this Codepen for an example:

I understand changes have been made to the navigation structure (I’ve read the blog), but I don’t see a workaround being described there. Also, what I’m trying to achieve is a pretty typical use case I think. Anything I’m missing? Is there a way to adapt my code so the state change will get a nice transition animation? Or should I resort to ng-if’s in my view?

2

So this comes from making the navigation structured and behave like their native counter parts.

http://ionicframework.com/blog/navigating-the-changes/

That means that you apps should use a much more unified and thought-out navigation structure, again, as you would have to in native apps.
Why do this (and no it’s not be cause we’re mean :smile: ) ?
This was done to create a better navigation system.
By make tabs and side-menus much more structured and follow certain patterns, you can get better user experience, and an apps who’s navigation is much easier to understand

3

Thanks @mhartington.

I have to disagree with you. Navigating from one page without tabs to a page that has tabs is not ‘bad UX’ per se- there are many situations where this is a perfectly acceptable UX pattern.

It’s also not consistent on the part of Ionic, since navigating from a page without tabs to a page with tabs actually works when using a sidemenu based project, but not in a non-sidemenu based project.

So is there basically no work around for this?

3 Likes
4

Fair enough :smile:

Issue opened for it

2 Likes
5

Thanks buddy, much appreciated :slight_smile:

6

Hello, I have the same issue navigating from a page with no sidemenu/tabs to a page with sidemenus/tabs and viceversa. There are no animations.

Can We have an update on this? Some ETAs? :wink:

Thankyou!

IONIC Rocks!

1 Like
7

Any ETA would be greatly appreciated guys

1 Like
8

If theres an open issue for it, we will address it when we get to it.
Pull Requests are alway welcomed though :smile:

9

I’m going to try, but since this issue has been popping up for over a year now, I doubt I’ll be able to crack something of this apparent complexity… I just remembered I opened an issue for this same thing over a year ago… https://github.com/driftyco/ionic/issues/437 :frowning:

10

In addition to this, any page outside of the tabs navigation structure has issues with displaying the back button, presumably for reasons related to the lack of animation.

For example, my app has a dashboard as the first screen with no tabs. From the dashboard you can tap an icon to go to any tabbed page. For this example, say I tapped ‘News’. News has a list of articles which you can tap to see the full article. When I navigate to a full article the back button is not visible until I navigate to a different tab and then back again to News. It is very strange behaviour and is not limited to me, David Chen also has this issue in the comments on this blog post: https://blog.nraboy.com/2014/12/understanding-tabs-ionic-framework/

This is a pretty major problem for us, it has caused us to have to ditch ionic on several projects. I agree that forcing UI practices on us is not welcomed.

EDIT: Since writing this I’ve come up with a temporary solution; use modals to create views outside of the tab structure.

2 Likes