19478


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

js

[code]

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

html

[code]

    <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>
    
[/code]


CC BY-SA 3.0
2015-11-29T09:55:57.740
19433
2015-11-30T13:28:02.780
2015-11-29T16:52:54.913
9566
13448
question
onsen-ui
onsen-uiでページ遷移のアニメーション前に要素のテキストを書き換える


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

[code]

    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";
      }
    });
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2015-11-30T13:28:02.780
19478
2015-11-30T13:28:02.780
8532
19433
answer