Page Transition Not Working Properly

ionic-v1
1

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

<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

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

Your login state also needs to include the menuContent view.

.state('login', {
	url: "/login",
	views: {
		'menuContent': {
			templateUrl: "templates/login.html",
			controller: 'LoginCtrl'
		}
	}
});

Edit: forgot to format the code

3

Thanks for the answer. If I add the ‘menuContent’ object as a view, will that not make the login page inherit from the menu.html template? That is not what I want to achieve.

4

Any update? I have exactly the same problem -

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

    $stateProvider
    
    .state('menu', {
            url: '/app',
            abstract: true,
            templateUrl: 'templates/menu.html',
            controller: 'HomeCtrl'
        })

    .state('menu.home', {
        url: '/home',
        views: {
            'menuContent': {
                templateUrl: 'templates/home.html'
            }
        },
    })

    .state('settings', {
        url: '/app/settings',
        templateUrl: 'templates/settings.html',
        controller: 'SettingsCtrl',
    })

    $urlRouterProvider.otherwise('/app/home');
    
});

Menu template:

<ion-side-menus enable-menu-with-back-views="false">
        <ion-side-menu-content>
            <ion-header-bar class="bar-hellocam">
                    <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
                    </button>
                    <h1 class="title"><img src="img/bar-logo.svg"></h1>
                    <button class="button button-icon button-clear ion-ios-gear">
                    </button>
            </ion-header-bar>
            <ion-nav-view name="menuContent"></ion-nav-view>
        </ion-side-menu-content>

        <ion-side-menu width="240" side="left">
            <ion-content class="sideMenu">
                <ion-list style="flex-grow: 1;">
                    <ion-item menu-toggle ui-sref="settings">
                        <i class="ion-ios-gear"></i>Settings
                    </ion-item>
                </ion-list>
            </ion-content>
        </ion-side-menu>
    </ion-side-menus>

Transition does not work when changing state to settings. What’s wrong?

5

Hey, is anybody here?