マウスをクリックして四角形を流暢に動かす

Question

CSSマウスをクリックすると、正方形の動きを滑らかにする方法を教えてください。流暢さを動かすことが必要なだけで、四角形が四角形を越えると、タスクは重要ではありません。

let cube = document.querySelector('[id="cube"]'); 
 
let field = document.querySelector('[id="field"]'); 
 

 
field.onclick = function(event) { 
 
    cube.style.left = event.clientX + 'px'; 
 
    cube.style.top = event.clientY + 'px'; 
 
}

#field { 
 
    width: 200px; 
 
    height: 150px; 
 
    border: 10px groove black; 
 
    overflow: hidden; 
 
    cursor: pointer; 
 
} 
 

 
#cube { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 40px; 
 
    height: 40px; 
 
}

<div id="field"> 
 
    <img src="https://image.prntscr.com/image/ZfIPM5SZT9qpWY2xZAx3FQ.png" id="cube"> 
 
</div>

Answer 1

#cube

-webkit-transition: all 1s; 
-moz-transition: all 1s; 
-o-transition: all 1s; 
-ms-transition: all 1s; 
transition: all 1s; 

Answer 2

あなたは移行使用することができます - 私はtransition: all 1s linear;のようなものを追加したときのデモ以下を参照するか、のような特定以上になりますあなたは

transition: top 1s linear, left 1s linear

をタイミング機能をチェックアウトすることができますを参照し、必要に応じて使用してください。 を使用して、以下の

参照のデモはを和らげる：

let cube = document.querySelector('[id="cube"]'); 
 
let field = document.querySelector('[id="field"]'); 
 

 
field.onclick = function(event) { 
 
    cube.style.left = event.clientX + 'px'; 
 
    cube.style.top = event.clientY + 'px'; 
 
}

#field { 
 
    width: 200px; 
 
    height: 150px; 
 
    border: 10px groove black; 
 
    overflow: hidden; 
 
    cursor: pointer; 
 
} 
 

 
#cube { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 40px; 
 
    height: 40px; 
 
    transition: top 1s ease, left 1s ease; 
 
}

<div id="field"> 
 
    <img src="https://image.prntscr.com/image/ZfIPM5SZT9qpWY2xZAx3FQ.png" id="cube"> 
 
</div>

Answer 3

のためのCSSスタイルに以下のコードを挿入してみてくださいはい、それは追加することにより可能ですキューブのCSSにtransition:all .2s ease;を追加します。

let cube=document.querySelector('[id="cube"]'); 
 
let field=document.querySelector('[id="field"]'); 
 

 
field.onclick=function(event) { 
 
    cube.style.left=event.clientX + 'px'; 
 
    cube.style.top=event.clientY + 'px';  
 
}

#field { 
 
     width: 200px; 
 
     height: 150px; 
 
     border: 10px groove black; 
 

 
     overflow: hidden; 
 
     cursor: pointer; 
 
} 
 
#cube { 
 
     position: absolute; 
 
     left: 0; 
 
     top: 0; 
 
     width: 40px; 
 
     height: 40px; 
 
-webkit-transition: all .2s ease; 
 
-moz-transition: all .2s ease; 
 
-o-transition: all .2s ease; 
 
-ms-transition: all .2s ease; 
 
transition:all .2s ease; 
 
}

<div id="field"> 
 
    <img src="https://image.prntscr.com/image/ZfIPM5SZT9qpWY2xZAx3FQ.png" id="cube"> 
 
</div>

Answer 4

私はこのようにそれを行うだろう：

let cube = document.querySelector('[id="cube"]'); 
 
let field = document.querySelector('[id="field"]'); 
 

 
field.onclick = function(event) { 
 
    cube.style.transform = "translate(" + event.clientX + "px, " + event.clientY + "px)"; 
 
    cube.style['-webkit-transform'] = "translate(" + event.clientX + "px, " + event.clientY + "px)"; 
 
}

#field { 
 
    width: 200px; 
 
    height: 150px; 
 
    border: 10px groove black; 
 
    overflow: hidden; 
 
    cursor: pointer; 
 
} 
 

 
#cube { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 40px; 
 
    height: 40px; 
 
    transition-duration: 1s; 
 
    transition-property: top left; 
 
    -webkit-transition-duration: 1s; 
 
    -webkit-transition-property: top left; 
 
}

<div id="field"> 
 
    <img src="https://image.prntscr.com/image/ZfIPM5SZT9qpWY2xZAx3FQ.png" id="cube"> 
 
</div>

EDIT

多分他の要素が異なるパラメータを必要とするので、私はallを使用しません。

私のサンプルは、他のブラウザのサポートをミスするので、同様にそれらのためのコードを追加します。 -moz-transition-o-transition-ms-transition