適切な方法

Question

問題文の

の例に見られるように、ボタンのクリックでビューポートの周囲に沿って、正方形を移動するには：

https://codepen.io/vineetrok/pen/XRowdB

何が必要ですか？

私はこのコードをCSSのtransitionと組み合わせて使用​​しています。私はtransitionとsetInterval()の組み合わせが遅れを引き起こしていると思います。これを行うにはjavascriptを使用するより効率的な方法がありますか？

私のコードを以下に示します。

HTML

<div class="box" style="left:0;top:0"></div> 
    <button type="button" name="button" onclick="init()">Start!</button> 

CSS

.box{ 
transition: all 1s linear; 
} 

JS

var elem = document.querySelector(".box"); 
var viewportWidth = window.innerWidth; 
var viewportHeight = window.innerHeight; 
var dimension = elem.clientWidth; 
var deltaX = viewportWidth - dimension; 
var deltaY = viewportHeight - dimension; 

function move(x,y){ 
    if(x <=0 && y==0){ 
    elem.style.left=(deltaX)+"px"; 
    } 
    else if(x==(deltaX) && y==0){ 
    elem.style.top=(deltaY)+"px"; 
    } 
    else if(x==(deltaX) && y==(deltaY)){ 
    elem.style.left="0px"; 
    } 
    else if(x==0 && y==(deltaY)){ 
    elem.style.top="0px"; 
    } 

} 

function getCoordinates(elem){ 
    return { 
    x: elem.getBoundingClientRect().left, 
    y: elem.getBoundingClientRect().top 
    } 
} 

var init = function(){ 
    var clearTimer = 1; 
    var startTimer = setInterval(function(){ 
    move(getCoordinates(elem).x,getCoordinates(elem).y) 
    }, 1000); 
     clearTimer++; 
     if(clearTimer>=4){ 
     clearInterval(startTimer); 
     } 
    } 

Answer 1

がここにそれで私の行くのです（私は最初から何かの代わりに、再利用するコードを開発した）：

let box=document.getElementById("box"), 
 
\t isLeft = false, 
 
\t isTop = false 
 

 
const toggleLeft =() => { 
 
    box.style.left = (isLeft=!isLeft) ? "calc(100% - 50px)" : "0"; 
 
    setTimeout(toggleTop, 2000); 
 
} 
 

 
const toggleTop =() => { 
 
    box.style.top = (isTop=!isTop) ? "calc(100% - 50px)" : "0"; 
 
    setTimeout(toggleLeft, 2000); 
 
} 
 

 
setTimeout(toggleLeft, 1000)

#box { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: #00f; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    -webkit-transition: all 2s ease-in-out; 
 
    transition: all 2s ease-in-out; 
 
}

<div id="box"></div>

そして、もっと凝縮し、再帰バージョン：

let box=document.getElementById("box"), 
 
\t is = { left : false, top : false } 
 

 
const toggle = what => { 
 
    box.style[what] = (is[what]=!is[what]) ? "calc(100% - 50px)" : "0"; 
 
    setTimeout(()=>toggle(what==="left"?"top":"left"), 2000); 
 
} 
 

 
setTimeout(()=>toggle("left"), 100)

#box { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: #00f; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    -webkit-transition: all 2s ease-in-out; 
 
    transition: all 2s ease-in-out; 
 
}

<div id="box"></div>

Answer 2

私は、一般的には、CSSとJavaScriptの両方を使ってトランジションを管理することが問題を引き起こすと言います。問題の一部は、JavaScriptのタイマーがあまり正確ではないということです。 1秒間タイマーを設定すると、実際には1秒間スリープ状態にはなりません。スリープ時間の正確な時間は、CPUの使用状況、ユーザーの行動などによって変わります.JavaScriptタイマーはCSSアニメーションよりも時間がかかりますが、非常に簡単です。

jQueryを使用しているので、jQuery.animate関数を使用して実行します。アニメーションが完了すると呼び出されるコールバック関数があり、アニメーションの次のステップをタイマーなしで実行できます。それは遅れがないことを確認します。また、公平に演奏者である必要があります。 CSSのアニメーションは、通常、コンピュータのパフォーマンスの点で最も遅いので、jQuery.anmiateがおそらく少し良くなると思っています。高性能アニメーションのために設計された他のライブラリがありますが、実際にパフォーマンスが問題にならない限り、私はそれについて心配しません。今の問題は、タイムアウトメソッドの不正確なタイミングであり、パフォーマンスの問題ではありません。