こんにちは、エンジニアチームのづやです。
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を止めてくれるやつな気がしてきた。
結局いろいろ調べたが他の方法がみつからず。
なんか一括で止められるとうれしいのだけど、ないのだろうか。。。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
