Javascript 通过鼠标点击流畅地移动正方形

如何在点击鼠标时借助

CSS

流畅地移动正方形。只需要流畅地移动，然后正方形超出矩形，任务并不重要

let cube=document.querySelector（'[id=“cube”]'）；
let field=document.querySelector（'[id=“field”]'）；
field.onclick=函数（事件）{
cube.style.left=event.clientX+'px'；
cube.style.top=event.clientY+'px'；
}

#字段{
宽度：200px；
高度：150像素；
边框：10px槽黑色；
溢出：隐藏；
光标：指针；
}
#立方体{
位置：绝对位置；
左：0；
排名：0；
宽度：40px；
高度：40px；
}

您可以使用一个过渡-当我添加了类似于

过渡的东西时，请参见下面的演示：所有1s线性或可以更具体，如：

转换：顶部1s线性，左侧1s线性

您可以查看定时功能，并根据需要使用

请参阅下面使用ease的演示：


let cube=document.querySelector（'[id=“cube”]'）；
let field=document.querySelector（'[id=“field”]'）；
field.onclick=函数（事件）{
cube.style.left=event.clientX+'px'；
cube.style.top=event.clientY+'px'；
}
#字段{
宽度：200px；
高度：150像素；
边框：10px槽黑色；
溢出：隐藏；
光标：指针；
}
#立方体{
位置：绝对位置；
左：0；
排名：0；
宽度：40px；
高度：40px；
过渡：上1s缓，左1s缓；
}
尝试将下面的代码插入到
#多维数据集的CSS样式中

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

是的，这可以通过添加
transition:all.2s ease到多维数据集的CSS


let cube=document.querySelector（'[id=“cube”]'）；
let field=document.querySelector（'[id=“field”]'）；
field.onclick=函数（事件）{
cube.style.left=event.clientX+'px'；
cube.style.top=event.clientY+'px'；
}
#字段{
宽度：200px；
高度：150像素；
边框：10px槽黑色；
溢出：隐藏；
光标：指针；
}
#立方体{
位置：绝对位置；
左：0；
排名：0；
宽度：40px；
高度：40px；
-webkit过渡：所有.2s轻松；
-moz转换：所有.2s易用；
-o型过渡：所有。2秒容易；
-ms转换：所有。2秒轻松；
过渡：所有。2轻松；
}
我会这样做：


let cube=document.querySelector（'[id=“cube”]'）；
let field=document.querySelector（'[id=“field”]'）；
field.onclick=函数（事件）{
cube.style.transform=“translate（“+event.clientX+”px，“+event.clientY+”px）”；
style['-webkit transform']=“translate（“+event.clientX+”px，“+event.clientY+”px）”；
}
#字段{
宽度：200px；
高度：150像素；
边框：10px槽黑色；
溢出：隐藏；
光标：指针；
}
#立方体{
位置：绝对位置；
左：0；
排名：0；
宽度：40px；
高度：40px；
过渡时间：1s；
过渡属性：左上角；
-webkit转换持续时间：1s；
-webkit转换属性：左上角；
}