CODEWITHSUNDEEP
angularjsionic-framework
Akinkunle Allen
Akinkunle Allen

Reputation: 1309

Page Transition Not Working Ionic Framework

I have set up my template pages and my routes. My page transition does not work when I change state to 'login' state, it just shows the page without transition. I don't know what the problem could be. My application's main page is index.html with an <ion-nav-view> element.

Here is my routing code:

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

.state('app', {
  url: "/app",
  abstract: true,
  templateUrl: "templates/menu.html",
  controller: 'AppCtrl'
})

.state('app.home', {
    url: '/home',
    views: {
        'menuContent': {
            templateUrl: "templates/home.html",
            controller: 'HomeCtrl'
        }
    }
})

.state('login', {
    url: "/login",
    templateUrl: "templates/login.html",
    controller: 'LoginCtrl'
});
       $urlRouterProvider.otherwise('/app/home');
 })

menu.html: This page is the parent state. Other pages inherit from it.

<ion-pane ion-side-menu-content>
    <ion-nav-bar class="bar-stable" id="header" animation="slide-left-right">
        <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>

        <img src="img/logo.png" alt="EasySpree" />

        <ion-nav-buttons side="right">
            <button class="button button-icon icon ion-ios7-email">
            </button>
        </ion-nav-buttons>
    </ion-nav-bar>

    <ion-nav-view name="menuContent"></ion-nav-view>

  </ion-pane>

index.html: Main Page - route defined on this page

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

Upvotes: 6

Views: 7548

Answers (3)

inorganik
inorganik

Reputation: 25525

In my case, I was routing to another module -

So I was going from

/tabs/plan

to

/tabs/dinners/edit/123

Once I added the edit component to the routing of my plan module, the transitions worked. I did not need to duplicate the component itself - it is still in the dinner module.

E.g.:

/tabs/plan/edit/123

Upvotes: 0

cainhs
cainhs

Reputation: 366

You have to put it in the animation="slide-left-right" in of your menu.html page.

E.g. menu.html:

<ion-pane ion-side-menu-content>
  <ion-nav-bar class="bar-stable" id="header" animation="slide-left-right">
    <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>

      <img src="img/logo.png" alt="EasySpree" />

      <ion-nav-buttons side="right">
        <button class="button button-icon icon ion-ios7-email">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>

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

Upvotes: 3

Saravanan S
Saravanan S

Reputation: 1043

I have created a tool Ionic builder to build barebones for ionic app. This will build all needed pages and files, add transitions, tabs or side menus. You can generate the app and download the code. Please give it a try!

Upvotes: 1

Related Questions