2015-07-21 70 views
0

我看着this documentationthis example,但我无法获得新页面内容的平滑滑入转换(当前按下我的按钮页面闪烁并加载在新内容中,没有在示例中可见的动画)。Ionic ion-nav-view错过了动画

我在做什么错?

index.html看起来像

<ion-pane> 
     <ion-header-bar class="bar-stable"> 
      <h1 class="title">Ionic Test</h1> 
     </ion-header-bar> 
     <ion-nav-view> 
      <ion-content padding="true"> 
       ... 
      </ion-content> 
      <ion-footer-bar> 
       <button class="bar bar-footer bar-calm button-large" ui-sref="quiz"> 
        <p class="title">Start the quiz<p> 
       </button> 
      </ion-footer-bar> 
     </ion-nav-view> 
    </ion-pane> 

app.js看起来像

var quizApp = angular.module('quizApp', ['ionic']); 

quizApp.run(function($ionicPlatform) { 
    $ionicPlatform.ready(function() { 
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard 
    // for form inputs) 
    if(window.cordova && window.cordova.plugins.Keyboard) { 
     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 
    } 
    if(window.StatusBar) { 
     StatusBar.styleDefault(); 
    } 
    }); 
}); 

quizApp.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 
     .state('quiz', { 
     url: '/quiz', 
     views: { 
      '@': { 
       templateUrl: "templates/quiz.html", 
       controller: "quizController as quizCtrl" 
      } 
     } 
     }); 

    $urlRouterProvider.otherwise("/"); 
}); 

quizApp.controller('quizController', ['$ionicPlatform', '$http', function($ionicPlatform, $http) { 
    this.blub = "test"; 
    this.test = function(text) { 
     alert(text); 
    } 
}]); 

而且quiz.html看起来像

<ion-view title="Home"> 
    <ion-content padding="true"> 
     <h2 style="font-size:50px;">{{quizCtrl.blub}}</h2> 
    </ion-content> 
    </ion-view> 

回答

0

好的,我明白了。唯一的问题是我宣称$urlRouterProvider.otherwise("/");,但没有为/定义state。这个丢失的state崩溃了整个应用程序,但没有抛出一个错误。

0

使用类似也许尝试:

<ion-nav-view animation="slide-left-right"></ion-nav-view> 
+0

谢谢,但没有改变:/ –