2015-07-21 73 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

謝謝,但沒有改變:/ –