12151


お世話になります。  
現在monacaを使用してアプリケーションの開発を行っています。

一覧ページから詳細ページに移行した際に、詳細ページをmodalが開いた状態で表示したいのですがなにか方法はありますでしょうか？  
自分が書いたコードですと、詳細ページが表示されてからmodalが開きます。

[code]

    prefNavigator.pushPage('prefResult.html', { animation: 'slide'});
            prefNavigator.on('postpush', function(){
                loadingModal.show();
            });
    
[/code]

また、Web
APIで読み込んだあとmodalを閉じているのですが、ページ遷移のfadeアニメーションのように、ふわっとmodalを閉じることは可能でしょうか？


CC BY-SA 3.0
2015-07-08T06:18:48.907
12146
2015-07-08T07:27:03.080
10445
question
monaca onsen-ui
【onsenui】遷移先でmodalを開いた状態で表示＆modalをfadeアニメーションで閉じたい。


`prepush`とjQueryの`fadeout`を使えばそれっぽい動きはできると思います。  
`fadeout`はもっと良い方法があるかもしれませんが。

以下、サンプル

[code]

    ons.bootstrap();
    
    function fadeout() {
      $("#modal").fadeOut(1000, function() {
        modal.hide();
      });
    }
    ons.ready(function() {
      navi.on('prepush', function(event) {
        modal.show();
        setTimeout('fadeout()', 1000);
      });
    });
[/code]

[code]

    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.3/build/css/onsenui.css" rel="stylesheet"/>
    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.3/build/css/onsen-css-components.css" rel="stylesheet"/>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.3/build/js/angular/angular.min.js"></script>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.3/build/js/onsenui.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <ons-navigator title="Navigator" var="navi">
      <ons-page>
        <ons-toolbar>
          <div class="center">Simple Navigation</div>
        </ons-toolbar>
        <div style="text-align: center">
          <br>
          <ons-button modifier="light" onclick="navi.pushPage('my-page.html', { animation : 'slide' } )">
            Push Page
          </ons-button>
        </div>
      </ons-page>
    </ons-navigator>
    
    <ons-template id="my-page.html">
      <ons-page id="my-page">
        <ons-toolbar>
          <div class="center">Modal</div>
        </ons-toolbar>
        <p style="text-align: center">
          <ons-button modifier="light"  onclick="navi.popPage()">Pop Page</ons-button>
        </p>
      </ons-page>
    </ons-template>
    
    <ons-modal var="modal" id="modal">
      <ons-icon icon="ion-load-c" spin="true"></ons-icon>
      <br><br>
      Please wait.<br>Fade Out after 1 second.
    </ons-modal>
[/code]


CC BY-SA 3.0
2015-07-08T07:27:03.080
12151
2015-07-08T07:27:03.080
3516
12146
answer