jQuery ピンチ動作によるtransform scaleの値を動的に変化させ、要素の拡大・縮小

【やりたいこと】
モバイルサイトのタッチ動作（ピンチイン・ピンチアウト）により拡大・縮小を実装したい

【現在の状況】
タッチ動作の操作にjQueryのhummer.jsを利用しています。
hummer.jsで取得したピンチイン・ピンチアウトの値を
$('').css('-webkit-transform', 'scale(' + 変数 + ')');
のように動的に変化させることには成功しましたが、ピンチイン・アウト動作が終わり再度タッチすると拡大・縮小したサイズからではなく、常に初期値からのサイズ変化となってしまいました。

そのため、変更後のscaleを取得して出来ないかと思い
［現在のscale値］+［タッチ動作の拡大率］-［初期値(1)］
を入れましたが、書き方が悪いのか変更後のscaleが初期値の1となります。

html
1<!DOCTYPE html>
2<html>
3	<head>
4		<meta charset="utf-8">
5		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
6		<title>Sample</title>
7		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
8		<script src="https://hammerjs.github.io/dist/hammer.js"></script>
9		<style>
10			.rsContent{
11				transform: scale(zoom_value);
12			}
13			#target1{
14				width: 100vw;
15				height: 100vh;
16				overflow: hidden;
17				background-color: aqua;
18			}
19		</style>
20	</head>
21	<body>
22		<div id="myElement"></div>
23		<div id="target1"><div class="rsContent"><img src="images/sample.jpg" width="240" height="240"></div></div>
24		<script src="js/sample.js"></script>
25	</body>
26</html>

javascript
1//タッチエリアを指定
2var myElement = document.getElementById('target1');
3//現在のscale値を取得
4var trans_scale = new WebKitCSSMatrix($('Content').css('-webkit-transform')).a;
5
6//hummer.jaの設定
7var mc = new Hammer.Manager(myElement);
8var pinch = new Hammer.Pinch();
9mc.add(pinch);
10
11//ピンチ動作時の設定
12mc.on("pinch", function(ev) {
13        //［現在のscale値］+［タッチ動作の拡大率］-［初期値(1)］
14	var cont_scale = trans_scale + ev.scale - 1;
15        //scaleの変更
16	$('.Content').css('-webkit-transform', 'scale(' + cont_scale + ')');
17	//確認用にhtmlに値を出力
18	$('#myElement').html(trans_scale);
19});

初歩的なことのようにも感じますが、どのように処理をすれば良いか教えていただけると幸いです。
よろしくお願いいたします。

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

回答1件

ベストアンサー

よく見てみましょう
不要部分を削除しました

JavaScript
1
2//現在のscale値を取得
3// グローバル変数なのでこの変数が指定された時Script読み込み時の値を取得
4var trans_scale = new WebKitCSSMatrix($('Content').css('-webkit-transform')).a;
5
6//ピンチ動作時の設定
7mc.on("pinch", function(ev) {
8	//［現在のscale値］+［タッチ動作の拡大率］-［初期値(1)］
9	//var cont_scale = trans_scale + ev.scale - 1;
10	/* この時点でtrans_scaleに対して再取得も再設定もしていないよね？
11	   そうしたらtrans_scaleはScript読み込み時の値のままだよね？
12	   もししたいのであれば下記の様にすればpinch開始時点の値(現在のscale値)になります。」
13	*/ 
14	trans_scale = new WebKitCSSMatrix($('Content').css('-webkit-transform')).a;
15	var cont_scale = trans_scale + ev.scale - 1;
16
17});