Onsen UI のpushpage遷移先のページでCSSの書き換えができない。

###前提・実現したいこと
Onsen UI V2 でピンチイン/ピンチアウトによる画像の拡大/縮小する機能を作成中です。
pushpageで遷移した先で、画像の拡大/縮小を行いたいのですがうまく動作しません。
遷移前のページでは拡大/縮小が動作しています。
動作するのであればAngularJSでも構いません。
解決方法がわかる方がおりましたらアドバイスください。

###発生している問題・エラーメッセージ

pushpageで遷移した先で、画像の拡大/縮小を行うためにCSSの書き換えを行っているが、反映されません。
<ons-gesture-detector>によるジェスチャーの検知は出来ています。
pushpage前のページであれば、問題なく拡大/縮小が出来ています。

###該当のソースコード

javascript
1var target = $("img.photo-zoom_jq");
2var prevScale = 1;
3var scale = 1;
4            
5$(document).on('transform', 'img.photo-zoom_jq', function(event) {
6    console.log('transform is detected.');
7    scale = Math.max(0.5, Math.min(prevScale * event.originalEvent.gesture.scale, 3));
8    target.css({transform : 'translate(50px, 200px) scale(' + scale + ',' + scale +')'});
9});
10$(document).on('release', 'img.photo-zoom_jq', function(event) {
11    console.log('release is detected.');
12    prevScale = scale;
13});
14$(document).on('touchmove', 'img.photo-zoom_jq', function(event) {
15    console.log('touchmove is detected.');
16    event.preventDefault();
17});
18

HTML
1<ons-navigator var="navi" page="page.html">
2  </ons-navigator>
3
4  <ons-template id="page.html">
5    <ons-page>
6      <ons-toolbar>
7        <div class="left">
8          <ons-back-button>Back</ons-back-button>
9        </div>
10        <div class="center">Navigation</div>
11      </ons-toolbar>
12
13      <section style="padding: 10px">
14        <ons-button ng-click="navi.pushPage('page2.html')">
15          Push Page
16        </ons-button>
17        <ons-gesture-detector>
18        ↓push前（検知：OK｜動作：OK）<br>
19        <img class="photo-zoom_jq" src="http://placekitten.com/g/240/240">
20        </ons-gesture-detector>
21
22      </section>
23    </ons-page>
24  </ons-template>
25  
26  <ons-template id="page2.html">
27    <ons-page>
28      <ons-toolbar>
29        <div class="left">
30          <ons-back-button>Back</ons-back-button>
31        </div>
32        <div class="center">Navigation</div>
33      </ons-toolbar>
34
35      <section style="padding: 10px">
36        <ons-button ng-click="navi.popPage()">
37          Pop Page<br>
38        </ons-button>
39        <ons-gesture-detector>
40        ↓push後（検知：OK｜動作：NG）<br>
41        <img class="photo-zoom_jq" src="http://placekitten.com/g/240/240">
42        </ons-gesture-detector>
43        
44      </section>
45    </ons-page>
46  </ons-template>

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

回答1件

ベストアンサー

angularjsのcontrollerを使うともっときれいになると思いますが
現状を修正する場合こんな感じでしょうか。

サンプルリンク

html
1<html>
2<head>
3    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
4    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
5    <script src="onsenui.min.js"></script>
6    <script src="angular-onsenui.min.js"></script>
7    <link rel="stylesheet" href="onsenui.css"/>
8    <link rel="stylesheet" href="onsen-css-components.css"/>
9    <link rel="stylesheet" href="my.css"/>
10
11    <script>
12        var app = ons.bootstrap('app', []);
13        document.addEventListener('init', function(event) {
14            if(event.target.id !== 'page2') return;
15            
16            var target = $("#page2 img.photo-zoom_jq");
17            console.log(target);
18            var prevScale = 1;
19            var scale = 1;
20            $(document).on('transform', '#page2 img.photo-zoom_jq', function(event) {
21                console.log('transform is detected.');
22                scale = Math.max(0.5, Math.min(prevScale * event.originalEvent.gesture.scale, 3));
23                target.css({transform : 'translate(50px, 200px) scale(' + scale + ',' + scale +')'});
24            });
25            $(document).on('release', '#page2 img.photo-zoom_jq', function(event) {
26                console.log('release is detected.');
27                scale = Math.max(0.5, Math.min(prevScale * event.originalEvent.gesture.scale, 3));
28                console.log('scale:' + scale);
29                target.css({transform : 'translate(50px, 200px) scale(' + scale + ',' + scale +')'});
30                console.log('css end.');
31            });
32            $(document).on('touchmove', '#page2 img.photo-zoom_jq', function(event) {
33                event.preventDefault();
34            });
35        });
36        document.addEventListener('destroy', function(event) {
37            $(document).off('transform release touchmove');
38        });
39    </script>
40</head>
41
42<body>
43<ons-navigator var="navi" page="page.html"></ons-navigator>
44
45<ons-template id="page.html">
46  <ons-page id="page1">
47    <ons-toolbar>
48      <div class="left">
49        <ons-back-button>Back</ons-back-button>
50      </div>
51      <div class="center">Navigation</div>
52    </ons-toolbar>
53    <section style="padding: 10px">
54      <ons-button ng-click="navi.pushPage('page2.html')">
55        Push Page
56      </ons-button>
57      <ons-gesture-detector>
58        ↓push前（検知：OK｜動作：OK）<br>
59        <img class="photo-zoom_jq" src="http://placekitten.com/g/240/240">
60      </ons-gesture-detector>
61    </section>
62  </ons-page>
63</ons-template>
64
65<ons-template id="page2.html">
66  <ons-page id="page2">
67    <ons-toolbar>
68      <div class="left">
69        <ons-back-button>Back</ons-back-button>
70      </div>
71      <div class="center">Navigation</div>
72    </ons-toolbar>
73    <section style="padding: 10px">
74      <ons-button ng-click="navi.popPage()">
75        Pop Page<br>
76      </ons-button>
77      <ons-gesture-detector>
78        ↓push後（検知：OK｜動作：NG）<br>
79        <img class="photo-zoom_jq" src="http://placekitten.com/g/240/240">
80      </ons-gesture-detector>
81    </section>
82  </ons-page>
83</ons-template>
84</body>
85</html>

投稿2016/11/10 11:29

編集2016/11/10 14:53

pinpikokun

総合スコア376

t0kura-5

2016/11/10 13:32

レビューありがとうございます。このJS部分は、monacaの教則本のサンプルアプリから借用しています。「event.preventDefault();」は、touchイベント全体でスクロールを無効にするためのようです。作成いただいたページをPC、モバイルで試しましたが、おっしゃるとおり動きませんでした。ソースに大きな違いは無いのですが、質問の本質とは違う問題のようなので、PC上で再現できるように<script></script>部分を以下のように変更しました。 <script> var app = ons.bootstrap('app', []); ons.ready(function() { var target = $("img.photo-zoom_jq"); var prevScale = 1; var scale = 1; $(document).on('transform', 'img.photo-zoom_jq', function(event) { console.log('transform is detected.'); scale = Math.max(0.5, Math.min(prevScale * event.originalEvent.gesture.scale, 3)); target.css({transform : 'translate(50px, 200px) scale(' + scale + ',' + scale +')'}); }); $(document).on('release', 'img.photo-zoom_jq', function(event) { console.log('release is detected.'); scale = Math.max(0.5, Math.min(prevScale * event.originalEvent.gesture.scale, 3)); console.log('scale:' + scale); target.css({transform : 'translate(50px, 200px) scale(' + scale + ',' + scale +')'}); console.log('css end.'); }); $(document).on('touchmove', 'img.photo-zoom_jq', function(event) { event.preventDefault(); }); }); </script> ons.ready(function() {～})を追加したのと、PCで取得できる「release」イベントで画像の位置を動かすようにしました。（iPhoneのsafariでは動きませんでしたのでPCのchromeで試してください。）再現方法ですが、ページを開いて最初に出た「page.html」では何もせずに、「Push Page」ボタンを押します。表示された「page2.html」の画像の上でクリックすると「release」イベントが発生し、CSSの書き換えが行われます。「Pop Page」ボタンを押して「page.html」に戻ると画像の位置が変わっているのがわかります。このとき、「page.html」のCSSのみ書き換えられ、「page2.html」のCSSが書き換わりません。「page2.html」のCSSを書き換えたい、というのがやりたいことになります。「page.html」の画像は、CSSが書き換わっているのを確認するために入れているだけですので、本来はなくてよいものです。「page2.html」の画像をクリックして、「page2.html」の画像の位置が動けばOKです。話がややこしくなり申し訳ございません。よろしくお願いします。

pinpikokun

2016/11/10 14:20

var target = $("img.photo-zoom_jq"); の時点でtargetが１ページ目の画像しか取得していないので２ページ目の画像が更新されません。例えばonsen-uiのinitイベントを使用してページが読み込まれたタイミングで var target = $("img.photo-zoom_jq");以降の処理をしてみてはいかがでしょうか initのリンク https://ja.onsen.io/v2/docs/guide/js/

pinpikokun

2016/11/10 14:56

回答も更新しておきました

t0kura-5

2016/11/10 15:03

ありがとうございます。解決しました。 Onsen UIの仕組みへの理解が少し深まりました。助かりました。

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