0

onsen-uiでページ遷移のアニメーション前に要素のテキストを書き換えるにはどうしたらいいですか?
下記のコードだとpushPage後、アニメーションが終了してからpタグ内のテキストが書き換わります。
先に書き換えてからアニメーションでページ遷移させたいです。
navigatorのpostpushイベントを拾っても同じでした。

js

ons.bootstrap();
function click(){
    myNavi.pushPage("page1.html",{animation:"lift",onTransitionEnd:end});
}
function end(){
    document.getElementById("message").innerText = "Message";
}

html

<ons-navigator var="myNavi">
    <ons-page>
        <ons-button onclick="click()">Button</ons-button>
    </ons-page>
</ons-navigator>

<ons-template id="page1.html">
    <ons-page>
        <p id="message">default</p>
    </ons-page>
</ons-template>
2
  • prepushイベントは試しましたか?
    – cither
    Commented 2015年11月29日 13:09
  • ありがとうございます。 試してみましたが、あくまでもpush前のようなので document.getElementById("message") でnullが返ってきます。 Angularのcontroller使ってならできたんですが、使わないで実現できないんですかね…
    – tyan rome
    Commented 2015年11月29日 17:42

1 件の回答 1

0

<ons-page>id属性を指定してpageinitイベントを利用すれば一応実現できます。
個人的にはOnsenUIを使うならAngularで書くのがベストだと思いますけれど。

ons.bootstrap();

function onClick(){
    myNavi.pushPage("page1.html",{animation:"lift"});
}
document.addEventListener('pageinit', function(e){
  if (e.target.id === 'page1') {
    document.getElementById("message").innerText = "Message";
  }
});
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.13/build/css/onsen-css-components.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.13/build/css/onsenui.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.13/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.13/build/js/onsenui.min.js"></script>

<body>
<ons-navigator var="myNavi">
    <ons-page>
      <ons-button onclick="onClick()">Button</ons-button>
    </ons-page>
</ons-navigator>

<ons-template id="page1.html">
    <ons-page id="page1">
        <p id="message">default</p>
    </ons-page>
</ons-template>
</body>

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

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