How to make page tab transitions in the Ionic Framework

Question

In the Ionic Framework, you can customize the tabs. Tabbed pages can easily be navigated using slide-left-right or another type of transition. This makes the application feel smooth and thoughtful.

The problem I am facing is that the pages associated with each tab, if you click them in the tab menu, do not go at all, but simply pops up the page.

I found a pen on codepen (link to a codepen demo) that can reproduce this effect the way I want (to some extent), but I cannot reproduce it in any scenario, especially in the version of Ionic rc0 (1.0).

The codepen code uses animations that don't seem to work elsewhere:

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

Please, help.

Answer 1

I did not try to get this exact example of work, but I achieved a similar effect in one of my applications, providing all the tabs with the same view name:

app.js

 $stateProvider .state('signin', { url: "/sign-in", templateUrl: "sign-in.html", controller: 'SignInCtrl' }) .state('forgotpassword', { url: "/forgot-password", templateUrl: "forgot-password.html" }) .state('tabs', { url: "/tab", abstract: true, templateUrl: "tabs.html" }) .state('tabs.home', { url: "/home", views: { 'tab-view': { templateUrl: "home.html", controller: 'HomeTabCtrl' } } }) .state('tabs.facts', { url: "/facts", views: { 'tab-view': { templateUrl: "facts.html" } } }) .state('tabs.facts2', { url: "/facts2", views: { 'tab-view': { templateUrl: "facts2.html" } } }) .state('tabs.about', { url: "/about", views: { 'tab-view': { templateUrl: "about.html" } } }) 

tabs.html

 <ion-tabs tabs-style="tabs-icon-top" tabs-type="tabs-positive" animation="slide-left-right"> <ion-tab title="Home" icon="ion-home" href="#/tab/home"> <ion-nav-view name="tab-view"></ion-nav-view> </ion-tab> <ion-tab title="About" icon="ion-ios7-information" href="#/tab/about"> <ion-nav-view name="tab-view"></ion-nav-view> </ion-tab> </ion-tabs> 

Note the name "tab" for each state and again as the name attribute on the ion-nav-view on each tab.

Answer 2

This helped me find a solution https://github.com/driftyco/ionic/issues/2997 . The trick is to load all the tabs in one view. You cannot use the ion-tabs directive to achieve this; you need to create your tab container using regular html:

 <ion-view title="Tabs Controller"> <!-- All tabs are going to load here --> <ion-nav-view name="menuContent"></ion-nav-view> <!-- TABS --> <div class="tabs-stable tabs-icon-top tabs-bottom tabs-standard"> <div class="tab-nav tabs"> <a class="tab-item" ng-click="goTabForums()" ng-class="{ active : settings.isTab1}"> <i class="icon bb-ios-forums"></i> <span translate="TABS.FORUMS_TAB"></span> </a> <a class="tab-item" ng-click="goTabGroups()" ng-class="{ active : settings.isTab2 }"> <i class="icon bb-ios-forums"></i> <span translate="TABS.GROUPS_TAB"></span> </a> <a class="tab-item" ng-click="goTabTopics()" ng-class="{ active : settings.isTab2 }"> <i class="icon bb-ios-topics"></i> <span translate="TABS.TOPICS_TAB"></span> </a> <a class="tab-item" ng-click="goTabNotifications()" ng-class="{ active : settings.isTab2 }"> <i class="icon bb-ios-notifications"></i> <span translate="TABS.NOTIFICATIONS_TAB"></span> </a> <a class="tab-item" ng-click="goTabProfile()" ng-class="{ active : settings.isTab2 }"> <i class="icon bb-ios-my-profile"></i> <span translate="TABS.MY_PROFILE_TAB"></span> </a> <a class="tab-item" ng-click="goTabMore()" ng-class="{ active : settings.isTab2 }"> <i class="icon bb-ios-more"></i> <span translate="TABS.MORE_TAB"></span> </a> </div> </div> 

your tablet controller should look like this:

 .controller('tabsCtrl', function($scope, $ionicConfig, $state) { $scope.goTabForums = function(){ $ionicConfig.views.transition('platform'); $state.go('tabsController.forums'); } $scope.goTabGroups = function(){ $ionicConfig.views.transition('platform'); $state.go('tabsController.groups'); } $scope.goTabTopics = function(){ $ionicConfig.views.transition('platform'); $state.go('tabsController.topics'); } $scope.goTabNotifications = function(){ $ionicConfig.views.transition('platform'); $state.go('tabsController.notifications'); } $scope.goTabProfile = function(){ $ionicConfig.views.transition('platform'); $state.go('tabsController.profile'); } $scope.goTabMore = function(){ $ionicConfig.views.transition('platform'); $state.go('tabsController.more'); }}) 

And finally, the routes:

 $stateProvider .state('tabsController.forums', { url: '/forums', views: { 'menuContent': { templateUrl: 'templates/forums.html', controller: 'forumsCtrl' } }}) .state('tabsController.topics', { url: '/topics', views: { 'menuContent': { templateUrl: 'templates/topics.html', controller: 'topicsCtrl' } }})