【OnsenUI ons-navigator】:resetToPageにアニメーションを設定するとinsertAdjacentHTMLが表示されなくなる

実現させたい事

resetToPageにアニメーションを設定してページを表示させた後にinsertAdjacentHTMLでons-list-itemを表示させる

概要

プラットフォーム:Monaca - OnsenUI V2 JS Tabbar

resetToPageにアニメーション記述なしで行うと正常に表示されます。
アニメーションは"slide", "simpleslide", "lift", "fade"　を試しましたが、表示されなかったです。
"none"の場合は表示されました。

initイベントでinsertAdjacentHTMLとconsole.log("test")を記述していますが、
console.logはどちらとも表記されます。

ご回答よろしくお願いします。

該当のソースコード

   //page3にあるbutton :resetToPageでfirst-pageに移動 
    var options = {animation: "lift"};
    function btn2(){
      document.getElementById('nav').resetToPage('tab.html', options);
    }

全体のソースコード

html
1 <script>
2
3    document.addEventListener('init', function(event) {
4      var page = event.target;
5      if (page.matches('#first-page')) {
6
7        console.log("test");
8
9        var code = [];
10        for(var i = 0; i <= 10; i++){
11          code.push(
12            '<li class="list-item"><div class="list-item__center">リスト' + i + '</div></li>'
13          );
14        }
15        document.getElementById('list01').insertAdjacentHTML('afterbegin', code.join(''));
16      }
17    });
18
19    //first-pageにあるbutton :page3に移動
20    function btn(){
21      document.getElementById('nav').pushPage('page3.html');
22    }
23
24   //page3にあるbutton :resetToPageでfirst-pageに移動 
25    var options = {animation: "lift"};
26    function btn2(){
27      document.getElementById('nav').resetToPage('tab.html', options);
28    }
29
30
31
32  </script>
33</head>
34<body>
35  <ons-navigator id="nav" page="tab.html"></ons-navigator>
36
37  <ons-template id="tab.html">
38  <ons-page>
39    <ons-toolbar>
40      <div class="center" id="toolbar-title"></div>
41    </ons-toolbar>
42    <ons-tabbar position="bottom">
43      <ons-tab label="Tab 1" page="tab1.html"  active>
44      </ons-tab>
45      <ons-tab label="Tab 2" page="tab2.html">
46      </ons-tab>
47    </ons-tabbar>
48  </ons-page>
49  </ons-template>
50
51  <ons-template id="tab1.html">
52    <ons-page id="first-page">
53
54      <div style="text-align:center; margin:10px 0;">
55        <ons-button onclick="btn();">ページ移動</ons-button>
56      </div>
57      <ul class="list" id="list01"></ul>
58      
59    </ons-page>
60  </ons-template>
61
62  <ons-template id="tab2.html">
63    <ons-page id="second-page">
64      <p style="text-align: center;">
65        This is the second page.
66      </p>
67    </ons-page>
68  </ons-template>
69
70
71    <ons-template id="page3.html">
72    <ons-page id="page3">
73      <div style="text-align:center; margin:20px 0;">
74        <ons-button onclick="btn2();">ページ移動</ons-button>
75      </div>
76    </ons-page>
77  </ons-template>
78</body>
79</html>

行動規範の内容に同意します

回答1件

ベストアンサー

Onsen UIの**pushPage()やresetToPage()**でアニメーションを使う場合、新たに遷移先のページが生成されます。
今回の場合、**resetToPage()**を実行すると、一時的に以下のようなページ構成になります。

<ons-page id="first-page"></ons-page>
<ons-page id="page3"></ons-page>
<ons-page id="first-page"></ons-page>

この状態でinitイベントが発火されるので、リストは二つある**#first-pageの最初のページの#list01**に追加されます。

forループのあとに以下のコードを追加して確認してください。

JavaScript
1var elem = document.querySelectorAll(".list");
2var len = elem.length;
3if (len > 0) {
4  console.log(len);
5  elem[len - 1].insertAdjacentHTML('afterbegin', code.join(''));
6}