Ionic sidemenu with Native-Page-Transitions

问题

I am trying to do native transition for ionic side-menu by using NativePageTransitions plugin (https://github.com/Telerik-Verified-Plugins/NativePageTransitions) and my experiment code as below:

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');
    });

It does animate, but the animation is a bit "weird" when clicking the item on the menu. At the right side where the content is visible, we will see the the slide in animation on there. How to avoid it?

来源：https://stackoverflow.com/questions/32411074/ionic-sidemenu-with-native-page-transitions

标签

cordova

ionic-framework