メニュー内項目のページ遷移時にアニメーションを付けたい

###前提・実現したいこと
ons-splitter内にあるlist-itemの、特定の項目だけにアニメーションをつけてページ遷移させたいのですができません。
可能な方法を教えて頂きたいです。

###発生している問題・エラーメッセージ
「トップページ」を押すと、エラーが出ます。

Uncaught TypeError: Cannot set property 'onclick' of null
www/index.html: 62

そして、なぜかバックボタンで戻れなくなりました……。

Uncaught TypeError: Cannot read property '_callback' of undefined
www/lib/onsenui/js/onsenui.min.js: 5

###該当のソースコード
「設定」を押して遷移させたいのですが、アニメーションがつきません。
ng-click="pushPage()"で遷移するものはアニメーションをつけることができましたが、これだけできません。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <script src="lib/onsenui/js/onsenui.min.js"></script>

    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
    <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
    <link rel="stylesheet" href="css/style.css">

    <script>
        ons.ready(function() {
            console.log("Onsen UI is ready!");
        });

        window.fn = {};
        window.fn.open = function() {
          var menu = document.getElementById('menu');
          menu.open();
        };
        window.fn.load = function(page) {
          var content = document.getElementById('content');
          var menu = document.getElementById('menu');
          content.load(page)
            .then(menu.close.bind(menu));
        };
    </script>
</head>

<body>
  <ons-splitter>
    <ons-splitter-side id="menu" side="left" width="200px" collapse swipeable>
  <ons-navigator id="menu-navigator" animation="lift" page="menu">
      <ons-page id="menuPage">
        <ons-list modifier="noborder">
          <ons-list-item onclick="fn.load('home.html')"  tappable>
           トップページ
          </ons-list-item>
          <ons-list-item onclick="fn.load('settings.html',{animation:lift})" id="menu-settings" tappable>
            設定
          </ons-list-item>
          <ons-list-item style="position:absolute; bottom:50px;" onclick="fn.load('tips.html')" modifier="nodivider" tappable>
            その他
          </ons-list-item>
        </ons-list>
      </ons-page>
    </ons-navigator>
    </ons-splitter-side>
    <ons-splitter-content id="content" page="home.html"></ons-splitter-content>
  </ons-splitter>

<!--設定画面を表示する時のアニメーション-->
<script>
document.addEventListener('init', function(event) {
  var page = event.target;

  if (page.id === 'home') {
    page.querySelector('#menu-settings').onclick = function() {
      document.querySelector('#menu-navigator').pushPage('settings.html');
    }; // ここのpushPageの表記がマズい？
}});
</script>

###試したこと
調べて少々書き直したりもしましたが、初心者なのでよく分からず戻して触らないようにしたりしました。

###補足情報(言語/FW/ツール等のバージョンなど)
Onsenui v2.0.0-rc1

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

回答2件

自己解決

いろいろと試行錯誤して弄ってみた結果、特定の項目だけにアニメーションをつけて遷移させることができました！
**こちらのページ**が大変参考になりました。

<script>
        ons.ready(function() {
            console.log("Onsen UI is ready!");
        });

        window.fn = {};
        window.fn.open = function() {
          var menu = document.getElementById('menu');
          menu.open();
        };
        window.fn.load = function(page) {    // 今まで通り読み込む
          var content = document.getElementById('menu-navi');
          var navi = document.getElementById('menu-navi');
          navi.resetToPage(page)
            .then(menu.close(menu));
        };
        window.fn.push = function(page, data) {    // アニメーションを付ける
          var content = document.getElementById('menu-navi');
          var menu = document.getElementById('menu');
          content.pushPage(page, data);
            menu.close();
        };
</script>

html
1<body>
2  <ons-splitter>
3    <ons-splitter-side id="menu" side="left" width="220px" swipe-target-width="100px" collapse swipeable>
4      <ons-page id="menuPage">
5        <ons-list>
6          <ons-list-item onclick="fn.load('home.html')"  tappable>
7            トップページ
8          </ons-list-item>
9          <ons-list-item onclick="fn.push('settings.html')" id="menu-settings" tappable>
10            設定
11          </ons-list-item>
12          <ons-list-item onclick="fn.push('tips.html')" style="position:absolute; bottom:50px;" tappable>
13            その他
14          </ons-list-item>
15        </ons-list>
16      </ons-page>
17    </ons-splitter-side>
18    <ons-splitter-content id="content" page="homePage.html"></ons-splitter-content>
19  </ons-splitter>
20
21<ons-template id="homePage.html">
22  <ons-page id="homePage">
23    <ons-navigator id="menu-navi" animation="slide" page="home.html"></ons-navigator>
24  </ons-page>
25</ons-template>

投稿2017/12/08 10:21

編集2017/12/13 00:58

hagana

総合スコア8

以下ソースですが、

HTML
1          <ons-list-item onclick="fn.load('settings.html',{animation:lift})" id="menu-settings" tappable>
2            設定
3          </ons-list-item>

onclickにfn.loadが定義されていますよね？

HTML
1    <script>
2        ons.ready(function() {
3            console.log("Onsen UI is ready!");
4        });
5
6        window.fn = {};
7        window.fn.open = function() {
8          var menu = document.getElementById('menu');
9          menu.open();
10        };
11        window.fn.load = function(page) {
12          var content = document.getElementById('content');
13          var menu = document.getElementById('menu');
14          content.load(page)
15            .then(menu.close.bind(menu));
16        };
17    </script>

fn.loadの動きとして、

１．引数で指定されたページを読み込む（pushPageではない）
２．ナビゲーターを終了する

という動きをしているように思います。
上記から、

１．アニメーションがつきません。
２．なぜかバックボタンで戻れなくなりました

という事象に合致しており、想定している「設定画面を表示する時のアニメーション」ではなく、こちらの処理で動作が行われてしまっていると予想します。

例えば、onclickの記述を削除して試してみると想定どおりに動きますでしょうか。

HTML
1          <ons-list-item id="menu-settings" tappable>
2            設定
3          </ons-list-item>

個人的には、以下コードが想定通りに動作していないことを予想しています。（ので、onclickの記述を削除すると何も処理が行われないと予想します）

HTML
1<!--設定画面を表示する時のアニメーション-->
2<script>
3document.addEventListener('init', function(event) {
4  var page = event.target;
5
6  if (page.id === 'home') {
7    page.querySelector('#menu-settings').onclick = function() {
8      document.querySelector('#menu-navigator').pushPage('settings.html');
9    }; // ここのpushPageの表記がマズい？
10}});
11</script>

投稿2017/12/06 00:08

akabee

総合スコア1947

hagana

2017/12/06 05:08

ご回答ありがとうございます。 onclickを削除すると、想定通りに動かず、何も処理が行われません。書き忘れていたので質問に書き足したのですが、「トップページ」を押すとエラーが出てしまいます。 ``` Uncaught TypeError: Cannot set property 'onclick' of null www/index.html: 62 ```

akabee

2017/12/06 05:48

＞onclickを削除すると、想定通りに動かず、何も処理が行われません。そうですよね。とりあえず動かすだけなら、内のコードの if (page.id === 'home') { を if (page.id === 'menu') { に変更すると動作しませんでしょうか？もしくは、onclickの定義を元に戻し、fn.loadを window.fn.load = function(page) { 　　　　document.querySelector('#menu-navigator').pushPage('settings.html'); }; にするとどうでしょうか。

hagana

2017/12/06 07:01

ありがとうございます。 if (page.id === 'menu') { にすると、正しく動作しました。しかし、まだonclickのエラーが出ます。そして、 window.fn.load = function(page) { 　　　document.querySelector('#menu-navigator').pushPage('settings.html'); }; にすると、メニュー内の「トップページ」と「その他」の項目を押しても、右ページにはそれぞれの項目のページが正しく開くのですが、メニュー内に設定のページが開いてしまいます。そして、「設定」を押した時だけ開かず、 Uncaught ReferenceError:settings is not defined www/index.html: 47 というエラーが出ます。

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

あなたの回答