过渡在第一次时不起作用

Question

我对过渡属性有问题。也就是说，它仅在第一次后有效。第一次没有过渡效应。

JS代码：

document.addEventListener("DOMContentLoaded", function() {
var second = document.querySelector('.square');
if(second) {
second.addEventListener("mouseenter", function() {
var maxX = Math.floor(Math.random() * (window.innerWidth - 200));
var maxY = Math.floor(Math.random() * (window.innerHeight - 200));
this.style.left = maxX + 'px';
this.style.top = maxY + 'px';
this.style.transition = 'left 2s, top 2s';
});
}
});

CSS代码：

* {
margin: 0;
padding: 0;
}
main {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.second {
height: 200px;
width: 200px;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}

编辑：

JSfiddle

更新：

将过渡过渡到 CSS 不会改变任何东西。正方形必须居中，不能离开窗户。

Answer 1

将transition、top和left移动到 css - 在设置新的 X 和 Y 之前，浏览器应该知道从什么过渡以及如何过渡。

document.addEventListener("DOMContentLoaded", function() {
var second = document.querySelector('.square');
if(second) {
second.addEventListener("mouseenter", function() {
var maxX = Math.floor(Math.random() * (window.innerWidth - 200));
var maxY = Math.floor(Math.random() * (window.innerHeight - 200));
this.style.left = maxX + 'px';
this.style.top = maxY + 'px';
});
}
});

.square {
background:red;
height: 200px;
width: 200px;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
transition: left 2s, top 2s;
top: 0;
left: 0;
}

<div class="square">
</div>

---

编辑 1

如果你想最初让你的正方形居中 - 添加这个

top: 50%;
left: 50%;
transform: translate(-50%, -50%);

document.addEventListener("DOMContentLoaded", function() {
var second = document.querySelector('.square');
if(second) {
second.addEventListener("mouseenter", function() {
var maxX = Math.floor(Math.random() * (window.innerWidth - 200));
var maxY = Math.floor(Math.random() * (window.innerHeight - 200));
this.style.left = maxX + 'px';
this.style.top = maxY + 'px';
});
}
});

.square {
background:red;
height: 200px;
width: 200px;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
transition: left 2s, top 2s;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

<div class="square"> 
</div>

---

编辑 2

考虑到你的小提琴 - 你应该修改你的maxX和maxY计算，因为transform属性将你的正方形的中心从"左上角"移动到"中心中心"：

document.addEventListener("DOMContentLoaded", function() {
var second = document.querySelector('.square');
if(second) {
second.addEventListener("mouseenter", function() {
var maxX = 100 + Math.floor(Math.random() * (window.innerWidth - 200));
var maxY = 100 + Math.floor(Math.random() * (window.innerHeight - 200));
this.style.left = maxX + 'px';
this.style.top = maxY + 'px';
});
}
});

* {
margin: 0;
padding: 0;
}
main {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.square {
height: 200px;
width: 200px;
position: absolute;
-webkit-box-shadow: 0px 0px 70px 5px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 70px 5px rgba(0,0,0,0.5);
box-shadow: 0px 0px 70px 5px rgba(0,0,0,0.5);
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
transition: left 0.8s, top 0.8s;
top: 50%;
left: 50%;
transform: translate(-50%,-50%); 
}

<main>
<div class="square">
<p>catch me!</p>
</div>
</main>