Ionic Framework page transition direction

ionic-v1
1

I’m using Ionic Framework with Angularjs for my app, but I’m getting stuck on the page transitions.

The app is for iOS and the back button gives the direction as forward. Is it possible to set the direction with javascript / Angularjs?

Here is part of my page config.

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

    .state('app', {
        url: "/app",
        abstract: true,
        templateUrl: "templates/menu.html",
        controller: 'AppCtrl'
    })
    .state('app.dashboard', {
        url: "/dashboard",
        views: {
            'menuContent': {
                templateUrl: "templates/dashboard/dashboard.html"
            }
        }
    })
    .state('app.DLRlogin', {
        url: "/DLR_login",
        views: {
            'menuContent': {
                templateUrl: "templates/dlr/dlr_login.html"
            }
        }
    })
    .state('app.search_phone', {
        url: "/search_phone",
        views: {
            'menuContent': {
                templateUrl: "templates/search_phone/search_phone.html"
            }
        }
    })

When the user goes from Dashboard to a page the transition goed forward, which is good, but the back button also gives a forward transition.

2

Which version of Ionic are you using? In 1.0.0-beta.14 you can use navDirection on a link to force the transition to appear like you are going backwards. However, if you are using the ion-nav-back-button it should automatically be forcing this animation. Do you have a custom back button? A codepen would be helpful. :smile:

3

Due to the projects importancy I can’t show a codepen.

Is there a way I can accomplish this with javascript?

4

You can call $ionicHistory.goBack() to navigate to the last view in the JS, but I don’t know of a way to force a back transition when you are not actually going to a back view (in JS).

5

Just spent a while figuring this out - the solution can be found by looking in the code for the nav-direction directive. In short:

$ionicViewSwitcher.nextDirection('back')

Sets the next view direction progmatically to back.

2 Likes