THE SAUNA これが噂のパラダイス
THE SAUNA これが噂のパラダイス
2014.01.08

JavaScriptで制御しているCSS3のtransitionを途中で中断させる方法

づや

こんにちは、エンジニアチームのづやです。

CSS3のtransition便利ですよね。
JavaScriptから制御してると、jQueryでanimateをstopさせるときみたいに途中で動きを止めたいことがありました。そんな時どうすればいいかわからなかったので、調べてみました。

JavaScriptから制御しているCSS3のtransitionを途中で中断させる方法

動かしてるstyleを上書きしてしまう

これが一番ベターっぽい。中断したいタイミングで対象となってるstyleを上書きすると止まってくれるようでした。

<!-- こんな要素があって -->
<input type="button" name="start" id="start" value="開始"><br>
<input type="button" name="stop" id="stop" value="停止"><br>
<div id="test" style="width: 100px;height: 100px;background-color: red;">
divです
</div>

<!-- 横と縦を伸ばしてみる -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function(){
	$('#start').on('click' , function(){
		$("#test").css({
			'width' : '400px' ,
			'height' : '400px' ,
			'transition' : 'all 5s linear 0ms',
			'-webkit-transition' : 'all 5s linear 0ms',
			'-moz-transition' : 'all 5s linear 0ms',
			'-o-transition' : 'all 5s linear 0ms'
		});
	});

	$('#stop').on('click' , function(){
		$("#test").css({
			'width' : $("#test").width() ,
			'height' : $("#test").height() ,
		});
	});
});

</script>

※css3に対応してるブラウザじゃないと動かないです。

translateの場合

しかしこれはtranslateの時はどう使ったらいいのだろうか。下記のようなコードでいけそうだけど、現在値の取り方がわからない。。。

<input type="button" name="start" id="start" value="開始"><br>
<input type="button" name="stop" id="stop" value="停止"><br>
<div style="width: 800px;height:800px;">
	<div id="test" style="width: 100px;height: 100px;background-color: red;">
	divです
	</div>
</div>

<!-- めんどくさくなったのでベンダープレフィックスは割愛。本当はちゃんと対応しよう -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function(){
	$('#start').on('click' , function(){
		$("#test").css({
			 'transform' : 'translate3d(400px,400px,0px)',
			 'transition' : 'all 5s linear 0ms',
 		});
	});

	$('#stop').on('click' , function(){
                // 取得のしかたがわからない。
                var taran_x = '?';
                var tran_y = '?';
		$("#test").css({
			 'transform' : 'translate3d(' + tran_x + 'px,' + tran_y + 'px , 0px)'
		});
	});
});

</script>

ログにだしつつ動かしてたら、動いてる途中でstyleを取得するとそれっぽいのが取れてる。

// 途中で出力すると
console.log($("#test").css("transform"));
// 下記みたいなのが取れる
matrix(1, 0, 0, 1, 55.8878, 55.8878)

こいつをとればいけそうで、下記みたいに指定してみる。

$('#stop').on('click' , function(){

		// 無理矢理配列にする
		var transrate = $("#test").css("transform").match(/(-?[0-9\.]+)/g);

		var tran_x = transrate[4];
		var tran_y = transrate[5];

		$("#test").css({
			'transform' : 'translate3d(' + tran_x + 'px,' + tran_y + 'px , 0px)'
		});

	});

これで動作を止めることができました。

簡単な方法を模索してみる

しかしもっと面倒くさくないやり方はないのだろうか。もう少し調べていきたいと思います。

実験・動かしてる途中でtransition-durationを0にしてしまう

どうもtransition-durationを0で上書きしてあげても止まってくれるとのことです。
下記のコードでさっそく実験してみます。

<!-- こんな要素があって -->
<input type="button" name="start" id="start" value="開始"><br>
<input type="button" name="stop" id="stop" value="停止"><br>
<div id="test" style="width: 100px;height: 100px;background-color: red;">
divです
</div>

<!-- こんなコードを書いてみる -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function(){
	$('#start').on('click' , function(){
		$("#test").css({
			'width' : '400px' ,
			'height' : '400px' ,
			'transition' : 'all 5s linear 0ms',
			'-webkit-transition' : 'all 5s linear 0ms',
			'-moz-transition' : 'all 5s linear 0ms',
			'-o-transition' : 'all 5s linear 0ms'
		});
	});

	$('#stop').on('click' , function(){
		$("#test").css({
			'transition-duration' : '0s',
			'-webkit-transition-duration' : '0s',
			'-moz-transition-duration' : '0s',
			'-o-transition-duration' : '0s'
		});

	});
});

</script>

あ、あれとまらない。
webkit系でもとまらない、なにが悪いのか書き直したり、調べてみたがわからず断念。

実験・webkitAnimationにnoneを指定してるといけるらしい

webkit限定のにおいがプンプンしますが、とりあえず試してみる。

$("#test").css({
			'animation' : 'none',
			'-webkit-animation' : 'none',
			'-moz-animation' : 'none',
			'-o-animation' : 'none',
		});

止まらない。。。
指定の仕方をいろいろ変えて実験してみる。

// こんなのも試してみたけどとまらない
		$("#test").css({
			'Animation' : 'none',
			'webkitAnimation' : 'none',
			'mozAnimation' : 'none',
			'oAnimation' : 'none',
		});

こいつはcss3のanimationを止めてくれるやつな気がしてきた。
結局いろいろ調べたが他の方法がみつからず。
なんか一括で止められるとうれしいのだけど、ないのだろうか。。。