Transition Between Tabs

Hi all,

I have been researching on this forum and Ionic’s GitHub Repo for an understanding of how to create smooth animations when transiting between Tabs. What I have gathered is that it is (1) Deprecated, and (2) The only way now is to use CSS animations.

Here is my routing file.

.config(function($ionicConfigProvider) {
$ionicConfigProvider.views.transition(‘platform’);
})

.config(function($stateProvider, $urlRouterProvider) {

// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state’s controller can be found in controllers.js
$stateProvider

// setup an abstract state for the tabs directive
.state(‘tab’, {
url: ‘/tab’,
abstract: true,
templateUrl: ‘templates/tabs.html’
})

// Each tab has its own nav history stack:

.state(‘tab.dash’, {
url: ‘/dash’,
views: {
‘tab-dash’: {
templateUrl: ‘templates/tab-dash.html’,
controller: ‘DashCtrl’
}
}
})
.state(‘tab.favourites’, {
url: ‘/favourites’,
views: {
‘tab-favourites’: {
templateUrl: ‘templates/tab-favourites.html’,
controller: ‘FavouritesCtrl’
}
}
})
.state(‘tab.bus’, {
url: ‘/bus’,
views: {
‘tab-bus’: {
templateUrl: ‘templates/tab-bus.html’,
controller: ‘BusCtrl’
}
}
})
.state(‘tab.bus-detail’, {
url: ‘/bus/:busId’,
views: {
‘tab-busDetail’: {
templateUrl: ‘templates/bus-detail.html’,
controller: ‘BusDetailCtrl’
}
}
})

.state(‘tab.account’, {
url: ‘/account’,
views: {
‘tab-account’: {
templateUrl: ‘templates/tab-account.html’,
controller: ‘AccountCtrl’
}
}
});

// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise(’/tab/dash’);

});

Forum Result 1
Forum Result 2
Github Issues

Looking forward to hearing how the animation should be implemented. Thank you!