Onsen UI V2のons-splitterでons-navigatorのpushアニメーションを使いたい

こんにちは。Onsen UI V2のons-splitterでons-navigatorのpushアニメーションを使いたいです。
ons-splitterの.content.loadに{animation:'slide'}のようなオプションが使えればいいんですが、アニメーション無しで遷移します。
ons-navigatorを利用してようとしているんですが、遷移先のページのメニューボタンを押しても無反応になってしまいます。
何か良いアイデアはないでしょうか？アドバイスよろしくお願いします。

Onsen
1<!DOCTYPE HTML>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<link rel="stylesheet" href="../css/onsenui.css">
6<link rel="stylesheet" href="../css/onsen-css-components.css">
7<script src="../js/angular.js"></script>
8<script src="../js/onsenui.js"></script>
9<script src="../js/angular-onsenui.js"></script>
10<title>onsen</title>
11<script>
12ons.bootstrap()
13.controller('SplitterController', function() {
14  this.load = function(page) {
15    mySplitter.content.load(page)
16      .then(function() {
17        mySplitter.left.close();
18      });
19  };
20});
21</script>
22</head>
23<body>
24<ons-navigator var="navi">
25<ons-page>
26<ons-splitter var="mySplitter" ng-controller="SplitterController as splitter">
27  <ons-splitter-side side="left" width="220px" collapse>
28    <ons-page>
29      <ons-list>
30        <!--  -<ons-list-item ng-click="splitter.load('home.html')" tappable>-->
31        <ons-list-item ng-click="navi.resetToPage('home.html',{animation:'default'})" tappable>
32          Home
33        </ons-list-item>
34        <!-- <ons-list-item ng-click="splitter.load('settings.html')" tappable>-->
35        <ons-list-item ng-click="navi.resetToPage('settings.html',{animation:'default'})" tappable>
36          Settings
37        </ons-list-item>
38        <!--  <ons-list-item ng-click="splitter.load('about.html')" tappable>-->
39        <ons-list-item ng-click="navi.resetToPage('about.html',{animation:'default'})" tappable>
40          About
41        </ons-list-item>
42      </ons-list>
43    </ons-page>
44  </ons-splitter-side>
45  <ons-splitter-content page="home.html"></ons-splitter-content>
46</ons-splitter>
47</ons-page>
48</ons-navigator>
49
50<template id="home.html">
51  <ons-page>
52    <ons-toolbar>
53      <div class="left">
54         <ons-toolbar-button ng-click="mySplitter.left.open()">
55          <ons-icon icon="md-menu"></ons-icon>
56        </ons-toolbar-button>
57      </div>
58      <div class="center">
59        Home
60      </div>
61    </ons-toolbar>
62    <div>
63     <ons-button ng-click="navi.pushPage('settings.html')">Setting</ons-button>
64     <ons-button ng-click="navi.pushPage('about.html')">about</ons-button>
65 </div>
66  </ons-page>
67</template>
68
69<template id="settings.html">
70  <ons-page>
71    <ons-toolbar>
72      <div class="left">
73        <ons-toolbar-button ng-click="mySplitter.left.open()">
74          <ons-icon icon="md-menu"></ons-icon>
75        </ons-toolbar-button>
76      </div>
77      <div class="center">
78        Settings
79      </div>
80    </ons-toolbar>
81  </ons-page>
82</template>
83
84<template id="about.html">
85  <ons-page>
86    <ons-toolbar>
87      <div class="left">
88        <ons-toolbar-button ng-click="mySplitter.left.open()">
89          <ons-icon icon="md-menu"></ons-icon>
90        </ons-toolbar-button>
91      </div>
92      <div class="center">
93        About
94      </div>
95    </ons-toolbar>
96  </ons-page>
97</template>
98</body>
99</html>

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

回答2件

ちょっと強引にしてますが
(resetToPageでのコールバックがないので開くと同時にサイドバー閉じる)

html
1<!DOCTYPE HTML>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6  <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'">
7  <script src="components/loader.js"></script>
8  <script src="lib/angular/angular.min.js"></script>
9  <script src="lib/onsenui/js/onsenui.min.js"></script>
10  <script src="lib/onsenui/js/angular-onsenui.min.js"></script>
11
12  <link rel="stylesheet" href="components/loader.css">
13  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
14  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
15  <link rel="stylesheet" href="css/style.css">
16<title>onsen</title>
17<script>
18  ons.bootstrap()
19  .controller('SplitterController', function() {
20  });
21</script>
22</head>
23<body>
24
25<ons-splitter var="mySplitter" ng-controller="SplitterController as splitter">
26  <ons-splitter-side side="left" width="220px" collapse>
27    <ons-page>
28      <ons-list>
29        <!--  -<ons-list-item ng-click="splitter.load('home.html')" tappable>-->
30        <ons-list-item ng-click="mySplitter.left.close(); navi.resetToPage('home.html',{animation:'default'});" tappable>
31          Home
32        </ons-list-item>
33        <!-- <ons-list-item ng-click="splitter.load('settings.html')" tappable>-->
34        <ons-list-item ng-click="mySplitter.left.close(); navi.resetToPage('settings.html',{animation:'default'});" tappable>
35          Settings
36        </ons-list-item>
37        <!--  <ons-list-item ng-click="splitter.load('about.html')" tappable>-->
38        <ons-list-item ng-click="mySplitter.left.close(); navi.resetToPage('about.html',{animation:'default'});" tappable>
39          About
40        </ons-list-item>
41      </ons-list>
42    </ons-page>
43  </ons-splitter-side>
44  <ons-splitter-content>
45    <ons-navigator swipeable var="navi" page="home.html"></ons-navigator>
46  </ons-splitter-content>
47</ons-splitter>
48
49<template id="home.html">
50  <ons-page>
51    <ons-toolbar>
52      <div class="left">
53         <ons-toolbar-button ng-click="mySplitter.left.open()">
54          <ons-icon icon="md-menu"></ons-icon>
55        </ons-toolbar-button>
56      </div>
57      <div class="center">
58        Home
59      </div>
60    </ons-toolbar>
61    <div>
62     <ons-button ng-click="navi.pushPage('settings.html')">Setting</ons-button>
63     <ons-button ng-click="navi.pushPage('about.html')">about</ons-button>
64 </div>
65  </ons-page>
66</template>
67
68<template id="settings.html">
69  <ons-page>
70    <ons-toolbar>
71      <div class="left">
72        <ons-toolbar-button ng-click="mySplitter.left.open()">
73          <ons-icon icon="md-menu"></ons-icon>
74        </ons-toolbar-button>
75      </div>
76      <div class="center">
77        Settings
78      </div>
79    </ons-toolbar>
80  </ons-page>
81</template>
82
83<template id="about.html">
84  <ons-page>
85    <ons-toolbar>
86      <div class="left">
87        <ons-toolbar-button ng-click="mySplitter.left.open()">
88          <ons-icon icon="md-menu"></ons-icon>
89        </ons-toolbar-button>
90      </div>
91      <div class="center">
92        About
93      </div>
94    </ons-toolbar>
95  </ons-page>
96</template>
97</body>
98</html>

こんな感じかな

投稿2019/01/30 06:08

rururu3

総合スコア5545

hakase

2019/01/30 06:13

ons-navigatorは、<ons-splitter-content></ons-splitter-content>の中に入れればいいのですね。ありがとうございますー。勉強になりますー

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

自己解決

https://teratail.com/questions/103457
に同様の質問がありました。

Onsen
1...
2<ons-splitter-content page="navi.html"></ons-splitter-content>
3...
4
5<template id="navi.html">
6<ons-page>
7<ons-navigator var="navi" page="home.html">
8</ons-navigator>
9</ons-page>
10</template>