0

こんにちは、MonacaでOnsenUIを使用してアプリを開発しています。

ons-navigatorのpushPageメソッドを使用して画面遷移を行っています。
その際にオブジェクトでアニメーションをfadeに指定しています。
遷移後の画面からpopPageメソッドを使用して前画面に遷移する際に別のアニメーションを指定したいです。
現在記述しているコードは以下となります。

<ons-toolbar>
    <div class="left">
        <ons-back-button ng-click="navi.popPage({animation:'slide'})">Back</ons-back-button>
    </div>
</ons-toolbar>

実行環境は以下になります。

  • デバイス:iPhone6(iOS9.3.5)
  • 実行環境:Monacaデバッガー6.0.0

OnsenUIはバージョン2.0以降だと思います。(getCurrentPageではなくtopPageが使用できました)
MonacaIDE上でバージョンを調べる方法がわかりませんでした。申し訳ありません。

 
 
pushPage時にアニメーションを未指定にし、popPage時にアニメーションを指定しましたがその場合もアニメーションの指定が反映がされませんでした。

pushPageとpopPageのアニメーションはセットになってしまっているのでしょうか。

以上です。よろしくお願い致します。

【2016/09/28 追記】
OnsenUI2.0.0(正式版)に差し替えたところ、教えて頂いた方法で実現することが出来ました。
ありがとうございました。

1 件の回答 1

0

まずonsenuiのバージョンですが、www/lib/onsenui/package.jsonを開くと、バージョンがわかります。

また、本来popPage時にもアニメーションは付けられるのですが、Monacaに組み込まれているのはOnsenUI 2.0 RC.1なので、不具合により、popPageアニメーションの設定が効かないです。npmで最新版(RC.18)を取得し、onsenuiディレクトリ以下を差し替えて下さい。

また、現状のようにons-back-buttonを使ってしまうと、これ自体がページを戻る機能を持っていますので、その後のng-click処理の前にデフォルトアニメーションで戻ってしまい、ng-clickでのpopPageは無視されてしまいます。
ons-buttonまたは自前のタグなどを使えば大丈夫です。

4
  • KNaitoさん 回答ありがとうございます。 返信が遅くなってしまい申し訳ありません。 OnsenUIのバージョン、確認できました。 popPageのアニメーションはバージョンが原因だったのですね。OnsenUIのバージョンをRC18に差し替えました。 同時に、'ons-back-button'を'ons-button'に変更いたしました。 しかし、アニメーションを'slide'に変更した場合popPageが動作しなくなってしまいます。 アニメーション'fade'を指定した場合は動作します。 何か別の指定方法があるのでしょうか。 現在は以下のように記述しています。 '<ons-button ng-click="navi.popPage({animation:'slide'})">test</ons-button>' 以上です。よろしくお願い致します。
    – osugi
    Commented 2016年9月12日 2:32
  • コードはそれであっていますね。デバッガーを6.0.1にして、設定から一時ファイルを消してみてください。すみませんが、slideが動作しないというのが自分の環境で再現出来ないので、ちょっと原因が分かりません。その不具合の発生する最小限のプロジェクトを作って全コードを乗せて再度質問するか、サポートに問い合わせるのが良いかと思います。
    – KNaito
    Commented 2016年9月12日 4:01
  • KNaitoさん コメントありがとうございます。 デバッガーの更新と一時ファイルの削除を試してみましたが、やはりslideアニメーションのみ動作しませんでした。liftやnoneは動作するので、コードの他部分に問題があるのかもしれません。別のプロジェクトで同様の環境を作成して試してみようと思います。この度はありがとうございました。
    – osugi
    Commented 2016年9月12日 4:12
  • 別プロジェクトでOnsenUI V2 Angular 1 Navigationテンプレートを作成。popPage用のボタンを作成し、pushPageには何もアニメーションを設定しませんでした(デフォルトはslide)。popPageのアニメーションにfadeを指定したところ現プロジェクトのslideと同じ現象が発生しました。fadeとslideの相性が悪いのかもしれません。また、pushとpopで別のアニメーションを指定するとpop時にナビゲーションバーが消失する不具合?を発見しました。アニメーションは同じものを使用するのが無難かもしれません。
    – osugi
    Commented 2016年9月12日 4:54

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。