页面转换不工作离子框架

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.

我已经设置了模板页面和路线。当我将状态更改为“登录”状态时,我的页面转换不起作用,它只显示没有转换的页面。我不知道问题是什么。我的应用程序的主页面是index.html,带有 元素。

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.

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: Main Page - route defined on this page

index.html:主页面 - 此页面上定义的路由

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

2 个解决方案

#1

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

你必须将它放在menu.html页面的animation =“slide-left-right”中。

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>

#2

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!

我创建了一个工具Ionic builder来为离子应用程序构建准系统。这将构建所有需要的页面和文件,添加转换,选项卡或侧面菜单。您可以生成应用程序并下载代码。请试一试!