bug: No view transitions when going to/from tabs

[mhartington]

Type: bug

Platform: all

Codepen http://codepen.io/mhartington/pen/zxdGKd

If you navigate to and from tabs, there are no view transitions. Also, the back button will not show either.

[munene]

+1

[jason-engage]

I was able to do a workaround for this using the CSS Animate library, some SASS, and Compass. You don't need compass or sass, but I find it simpler to use once it's setup.

Going back from A Single Page View to a Tab Container View, the slide transition seems to work fine if you add ' nav-direction="back" ' on the back button in the Single Page View.

However, going from a Tab Container to a Single Page View seems to skip the sliding animation altogether, even when placing 'nav-direction="forward"' on the button.

So I included 'animate.css' in the index.html and using a bit of css hacks I am able to have a nice slide from the tabs into the Single Page View. I'm using SASS btw, and a fairly simple view setup. Notice that I'm using the 'slideOutLeft' animation to hide it.

//ADD THIS TO YOUR SCSS file
//This first part makes sure the page slides
ion-view.main-container.pane {
    opacity:1!important;
    &[nav-view="cached"] {
        @include animation(slideOutLeft 400ms ease);
        display:block!important;
    }
    //This second part makes sure that the header slides too
    .a-tab-view-class.pane ion-nav-bar.hide {
        display:block!important;
    }
}

In the Tab View (that exists inside the tab container view), make sure you have a class (ie. 'a-tab-view-class') on the ion-view tag. And also make sure that you copy over the 'ion-nav-bar' tag from the main index page, otherwise, you can't target the ion-nav-bar properly.

Like so:

<ion-view title="Your App Name" class="a-tab-view-class">

    <ion-nav-bar class="bar-positive">
        <ion-nav-buttons side="secondary">
            <button class="button icon ion-plus" ng-click="goSinglePage()">
            </button>
        </ion-nav-buttons>
    </ion-nav-bar>

   <ion-content>...</ion-content>
</ion-view>

And you'll also have to include the slideIn CSS for your single view page:

ion-view.a-single-page {

    //FIX For missing Animation
    &[nav-view="active"] {
        @include animation(slideInRight 400ms ease);
    }

}

[JerryBels]

@jason-engage thanks for your help, but you state that

Going back from A Single Page View to a Tab Container View, the slide transition seems to work fine if you add ' nav-direction="back" ' on the back button in the Single Page View

For me, and as I understand here I'm far from being the only one, the said single page doesn't have a back button at all - it's not on the same nav stack. So your method can help provide the transition to the single page (I haven't tested it), but can't resolve the whole issue we're facing here.

Thanks anyway for sharing the possibility to use animate.css on ion-views !

[sgentile]

Yes to JerryBels - this is the issue

[JerryBels]

@michahell did you have time to work on a solution ? Since you said you were going to look for one... What @zero7u did is great, but there is a huge limitation to it : you have to set the state of your single page in the same ion-nav-view that the wanted tab is in. This isn't possible to use in a real life, complex application like the one I'm working on.

For exemple, I need to be able to reach an image from the tabbed view, but that image can be reached also from other places - forcing me to define multiple states for each view. Same goes with user profile, for the user that uploaded the image, or in a chatlist, or simply the userslist... I need to define a state for each of them, with resolve conditions, etc... It's very complicated and not really worth it.

We need a complete, working solution, and since @adamdbradley said they were not planning to do anything about it for now, we're a little on our own here !

[jason-engage]

@JerryBels If you're trying to force transitions between tabbed views, then I have to agree with the ionic team that this is not a standard design pattern you see on any major apps. I think some people like me would like to see transitions between tabbed and single view, which seems to be a bug in ionic imo.

But I'm pretty sure you could achieve tabbed-view transition effects with Animate.css and targeting the right tag attributes as they are added/removed during view changes. I don't think you can do it using ionicHistory or ionicConfig out of the box.

[jason-engage]

@JerryBels Actually there is a way of getting transitions between tabs but you can't use the ion-tabs directive. You have to create your tab container using regular html and ionic css like so:

<ion-view class="tabs-container">

    <!-- Single UI VIEW -->
    <ion-nav-view name="tabview"></ion-nav-view>

    <!-- TABS -->
    <div class="tabs tabs-icon-top">
        <a class="tab-item" ng-click="goTab1()" ng-class="{ active : settings.isTab1}">
            <i class="icon ion-ios-flame"></i> Tab1
        </a>
        <a class="tab-item" ng-click="goTab2()" ng-class="{ active : settings.isTab2 }">
            <i class="icon ion-ios-location"></i> Tab2
        </a>
        <a class="tab-item" ng-click="goTab3()" ng-class="{ active : settings.isTab3, 'has-badge' : settings.numberOfBadges != 0 }">
            <i class="icon ion-ios-chatboxes"></i> Tab3 <span class="badge badge-assertive" ng-if="settings.numberOfBages != 0">{{settings.numberOfBadges}}</span>
        </a>
        <a class="tab-item" ng-click="goTab4()" ng-class="{ active : settingsTab4}">
            <i class="icon ion-ios-people"></i> Tab4
        </a>
    </div>

</ion-view>

In your goTabX() functions, you'll need to add this code before changing the state:

$ionicConfig.views.transition('platform');
$state.go('tabview.tabX')

This works differently than the ion-tab directive which loads each tab view in separate views. Instead this way, you load each tab in the same view using the correct $states in $stateProvider.

You'll also need to keep track of which tab is active, and how many badges each one might have. I supplied some sample code for that.

I didn't provide all the code you need, but if you really need to get it working I can help you out further using this method.

[JerryBels]

@jason-engage you are really, really kind to help like that, thank you.

But I'm afraid you really have it wrong : I don't want to induce a transition between tabs, I do want to do the exact same as you : going from a Single Page to a Tabbed Page, and from a Tabbed Page to a Single Page, with transitions and back buttons. In both cases, I (and others) don't have any transition (which can be fixed with a method like the one you used) nor back button (which is considerably more of an issue).

I also thought about using regular elements with classes instead of the directives, I will give it a shot today or tomorrow and update you guys.

[JerryBels]

Okay, so, I had success implementing tabs with transitions and back buttons by getting rid of tabs directives and using instead my own states with tabs CSS only, like Jason shown above. ATM, and until tabs are production ready (cleaned from this huge bug, then) it's your best bet.

[danbucholtz]

Hi everyone,

Following up on what @adamdbradley previously said, there are some very challenging limitations with ui-router and navigation/transitions in Ionic v1. We're really sorry about that. Many of these issues will be resolved by the improved navigation architecture in V2. We won't be able to fix this in V1 unless we do significant refactoring. If this is something the community really wants, we could reconsider.

Thanks, Dan