Question

我查看this documentation和this example，但我无法顺利过渡新页面内容（目前当我按下按钮时页面会闪烁并加载新内容，没有示例中可见的动画。）

我做错了什么？

我的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>

Answer 1

也许尝试使用类似的东西：

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

Answer 2

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

离子离子导航视图错过了动画

2 个答案: