Ионная ионная навигация пропускает анимацию

0

Я просмотрел эту документацию и на этом примере, но я не могу получить плавный переход в новый контент страницы (в настоящее время, когда я нажимаю свою кнопку, страница мигает и загружается в новом контенте, без анимации как видимой в примере).

Что я делаю не так?

Мой 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>
Теги:
angular-ui-router
ionic

2 ответа

0
Лучший ответ

Ладно, я понял. Единственная проблема заключалась в том, что я объявил $urlRouterProvider.otherwise("/"); но не определил state для /. Это отсутствующее state разбило все приложение, но не выдало ошибку.

0

Возможно, попробуйте использовать что-то вроде:

<ion-nav-view animation="slide-left-right"></ion-nav-view>
  • 0
    спасибо, но это ничего не изменило: /

Ещё вопросы

Сообщество Overcoder
Наверх
Меню