用鼠標點擊廣場的流暢運動

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

嘗試插入下面的代碼到CSS樣式爲#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

是，通過添加可能transition:all .2s ease;添加到多維數據集的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; 
 
-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>

編輯

我不會使用全部，也許其他元素將需要不同的參數。

我的樣品忽略了其他瀏覽器都支持，所以對他們添加代碼，以及： -moz-transition-o-transition-ms-transition