要素が移動する際に transition-duration をかけてなめらかに移動するようになっており、setIntervalによって1秒毎にちょっとずつ右に進んでいきます。
右端までいったら瞬間的に左端に戻したいのですがtransition-durationの関係上、一瞬では戻りません。そこで秒数を 0s にセットし、移動を行った後、もとの秒数に戻すようにしました。
Javascript
1// 移動にかかる秒数を0秒にする 2box.style.transitionDuration = "0s"; 3 4// 左端に戻す 5box.style.transform = "translateX(0)"; 6 7// 移動時の秒数を元に戻す 8box.style.transitionDuration = "1s";
動作を見ると 0s をセットしてもすぐに 1s で上書きされてしまうので移動時には1秒かけて動いてしまいます。
全体は次のとおりです。
左端に戻った直後からすぐ動き出してほしいのですがこれでは左端に戻ってから1秒待つことになります。
JavaScript
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 #box { 8 background: red; 9 width: 30px; 10 height: 30px; 11 transition: all 1s; 12 transform: translateX(0); 13 } 14 </style> 15 <script> 16 document.addEventListener('DOMContentLoaded', function(){ 17 var x = 0; 18 var box = document.getElementById('box'); 19 setInterval(function(){ 20 if(x > 120) { 21 x = 0; 22 box.style.transitionDuration = "0s"; 23 box.style.transform = "translateX(" + x + "px)"; 24 } else { 25 x += 30; 26 box.style.transitionDuration = "1s"; 27 box.style.transform = "translateX(" + x + "px)"; 28 } 29 }, 1000); 30 }); 31 </script> 32 </head> 33 <body> 34 <div class="container"> 35 <div id="box"></div> 36 </div> 37 </body> 38</html>
一時的にトランジション無しで移動させ、移動が終わったらトランジションを再度有効にするにはどのようにすれば良いのでしょうか?
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/06/15 03:04
2017/06/15 03:29
2017/06/16 09:31