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: GitHub - angular-ui/ui-router: The de-facto solution to flexible routing with nested views in AngularJS
// 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!