

ONSEN UIで以下の実装を実現しようとしています。

  1. タブ内のあるタブをタップする。
  2. タップ後、「ng-click="app.navi.pushPage('page.html', { animation : 'lift' });"」と同様にページを下から上にスライドして新ページを表示する。
  3. 新ページはを非表示にする。
  4. 新ページから前ページに戻るときはページを上から下にスライドして前ページに戻る。
  5. 前ページはを表示にする。

画面遷移イメージはinstagramのカメラタブをタップした時(スライドの方向は上下逆ですが)とほぼ同じです。  
上記実装をONSEN UIでどのようにすればよろしいでしょうか？

ご存知の方いらっしゃいましたら、ご教授のほどお願いいたします。


CC BY-SA 3.0
2015-08-24T09:16:47.157
14798
2016-08-26T07:34:09.850
9561
question
monaca onsen-ui angularjs
<ons-tab>タップ時の画面遷移カスタマイズについて


こんな感じの動作で良いんでしょうか。セレクタを使いたかったのでjQueryを入れてます。

[code]

    ons.bootstrap()
    .controller('AppController', function($scope, $element, $timeout){
      $timeout(function(){
        $scope.tabbar.on('prechange', function(e){
          if(e.index === 1){
            e.cancel();
            $scope.liftPage();
          }
        });
      });
      
      $scope.liftPage = function(){
        $element.find('.upper-page').addClass('show');
      };
      
      $scope.lowerPage = function(){
        $element.find('.upper-page').removeClass('show');
      };
    });
[/code]

[code]

    .upper-page{
      z-index: 100000;
      background-color: #DDD;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 100%;
      left: 0;
      bottom: 0;
      right: 0;
      transition-duration: 0.4s;
      transition-property: top;
    }
    .upper-page.show{
      top: 0;
    }
    .back-button{
      width: 100%;
      position: absolute;
      bottom: 0;
      text-align: center;
    }
[/code]

[code]

    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/css/onsen-css-components.css" rel="stylesheet"/>
    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/css/onsenui.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/js/angular/angular.min.js"></script>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/js/onsenui.min.js"></script>
    
    <div ng-controller="AppController">
      
      <ons-tabbar var="tabbar">
        <ons-tab icon="home" label="Home" page="page1.html" active="true"></ons-tab>
        <ons-tab icon="camera" label="Camara"></ons-tab>
        <ons-tab icon="gear" label="Settings" page="page3.html"></ons-tab>
      </ons-tabbar>
      
      <div class="upper-page">
        <h1>Page2.html</h1>
        <div class="back-button">
          <i class="fa fa-4x fa-times" ng-click="lowerPage()"></i>
        </div>
      </div>
      
    </div>
    
    <ons-template id="page1.html">
      <ons-toolbar></ons-toolbar>
      <h1>Page1</h1>
    </ons-template>
    
    <ons-template id="page3.html">
      <ons-toolbar></ons-toolbar>
      <h1>Page3</h1>
    </ons-template>
[/code]


CC BY-SA 3.0
2015-09-05T17:22:52.940
16293
2015-09-05T17:22:52.940
8532
14798
answer