Question

我正在尝试使用NativePageTransitions插件（https://github.com/Telerik-Verified-Plugins/NativePageTransitions）和我的实验代码进行离子侧菜单的原生转换：

的index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>


    <!-- compiled css output -->
    <link href="css/ionic.app.css" rel="stylesheet">

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">

     <ion-nav-view></ion-nav-view>
  </body>
</html>

menu.html

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Menu</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
                <ion-item nav-clear menu-close ng-click="drawer('close', 'left', 'black','#/app/boo')">
        Boo
        </ion-item>
        <ion-item nav-clear menu-close ng-click="drawer('close', 'left', 'black','#/app/foo')">
          Foo
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

boo.html

<ion-view view-title="boo">
    <ion-tabs class="tabs-positive tabs-icon-only tabs-top">
    </ion-tabs>
</ion-view>

foo.html

<ion-view view-title="foo">
  <ion-content>
    <ion-list>
      test foo
    </ion-list>
  </ion-content>
</ion-view>

app.js

    // Ionic Starter App

    // angular.module is a global place for creating, registering and retrieving Angular modules
    // 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
    // the 2nd parameter is an array of 'requires'
    angular.module('starter', ['ionic'])
    .config(function($ionicConfigProvider) {

      // note that you can also chain configs
      $ionicConfigProvider.views.transition('none')
  })
    .controller('AppCtrl',function($scope,$state){

      $scope.drawer = function (action, origin, color, href) {
        // not passing in options makes the plugin fall back to the defaults defined in the JS API
        window.plugins.nativepagetransitions.drawer({
          'action': action,
              'origin': origin,
              'duration': 350,
              'href': href
          },
          function () {
              console.log('------ drawer transition finished');
          },
          function (msg) {
              alert('error: ' + msg);
          });
    }
})
    .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();
      }

  });
  })
    .config(function($stateProvider, $urlRouterProvider) {
      $stateProvider

      .state('app', {
        url: "/app",
        abstract: true,
        templateUrl: "menu.html",
        controller: 'AppCtrl'
    })
      .state('app.foo', {
          url: "/foo",
          views: {
            'menuContent': {
                templateUrl: "foo.html"
            }
        }
    })
      .state('app.boo', {
          url: "/boo",
          views: {
            'menuContent': {
                templateUrl: "boo.html"
            }
        }
    });
      // if none of the above states are matched, use this as the fallback
      $urlRouterProvider.otherwise('/app/foo');
    });

它会设置动画效果，但单击菜单上的项目时动画有点“怪异”。在内容可见的右侧，我们将在那里看到动画幻灯片。如何避免呢？

Ionic sidemenu with Native-Page-Transitions

0 个答案: