Javascript 为什么第一次单击事件时转换不起作用？

我尝试将一个div（#ball）移动到另一个div（#square）中，以通过Javascript单击point。第一次点击将移动球，无过渡持续时间1s。但从第二次点击开始，直到我刷新Html页面，一切都正常

我使用新的Chrome浏览器

Html

CSS

#正方形{
/*背景色、宽度等*/
位置：相对位置；
}
#球{
/*背景色、宽度等*/
位置：绝对位置；
过渡时间：1s；
}

Javascript

let square=document.getElementById（'square'）；
让ball=document.getElementById（'ball'）；
square.addEventListener（'单击'，（事件）=>{
ball.style.top=event.pageY+“px”；
ball.style.left=event.pageX+“px”；
});

如果不为

#ball

元素指定

顶部

和

左侧

，它们默认为

自动

例如，当从auto=>100转换时，不会发生转换，因为auto不是一个数字

指定初始的顶部和左侧将使此工作正常

let square=document.getElementById（'square'）；
让ball=document.getElementById（'ball'）；
square.addEventListener（'单击'，（事件）=>{
ball.style.top=event.pageY+“px”；
ball.style.left=event.pageX+“px”；
});
#正方形{
背景颜色：灰色；
宽度：90%；
高度：90vh；
职位：相对
}
#球{
背景颜色：蓝色；
宽度：20px；
高度：20px；
排名：0；
左：0；
位置：绝对位置；
过渡时间：1s；
}

元素的初始顶部/左侧为
auto
-请尝试在
#ball
中设置顶部和左侧，您可以在其中说“etc”，这非常有效，谢谢Bravo。