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を止めてくれるやつな気がしてきた。
結局いろいろ調べたが他の方法がみつからず。
なんか一括で止められるとうれしいのだけど、ないのだろうか。。。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
Webサイト制作の実績・料金を見る
この記事のシェア数
1983年生まれ。SIerとしてのキャリアをスタートし、JavaやC#を中心に多岐にわたる開発プロジェクトにエンジニアとして参加。その経験を活かし、LIGを創業。バックエンドおよびフロントエンドエンジニアとしての深い知識と経験をもとに、多様なプロジェクトに従事。現在は、取締役COO兼CTO、DX事業本部長として、社内の体制やルールの最適化、AI技術の推進など、経営戦略の一翼を担う。
このメンバーの記事をもっと読むこのメンバーの記事をもっと読む
