HTMLDIV并没有从右向左斜向移动到末尾

Question

<style>
#container {
width: 400px;
height: 400px;
position: relative;
background: rgb(240, 240, 231);
}

#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}

#animate1 {
width: 50px;
height: 50px;
left: 350px;
top: 2px;
position: absolute;
background-color: rgb(43, 1, 1);
}
</style>

<p>
<button onclick="myMove()">Click Me</button>
</p>

<div id="container">
<div id="animate"></div>
<div id="animate1"></div>
</div>

<script>
function myMove() {
var elem = document.getElementById("animate");
var elem1 = document.getElementById("animate1");

var pos = 0;
var pos1 = 0;
var id = setInterval(frame, 5);
var id1 = setInterval(frame1, 5);

function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + "px";
elem.style.left = pos + "px";
}
}

function frame1() {
if (pos1 == 350) {
clearInterval(id1);
} else {
pos1++;
elem1.style.top = pos1 + "px";
elem1.style.right = pos1 + "px";
}
}
}
</script>

在上面的代码中，我有两个立方体(div(。单击按钮时，左立方体应从左向右倾斜移动到容器的末端，右立方体应从右向左倾斜移动到集装箱的末端。但只有左立方体从左向右移动，右立方体从上到下移动我希望右立方体从右向左对角移动，直到容器的末尾。这是我的沙盒链接。https://codesandbox.io/s/autumn-sun-uz961?file=/index.html

Answer 1

.animate1类左：350px，右：0即可。

function myMove() {
var elem = document.getElementById("animate");
var elem1 = document.getElementById("animate1");
var pos = 0;
var pos1 = 0;
var id = setInterval(frame, 5);
var id1 = setInterval(frame1, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + "px";
elem.style.left = pos + "px";
}
}
function frame1() {
if (pos1 == 350) {
clearInterval(id1);
} else {
pos1++;
elem1.style.top = pos1 + "px";
elem1.style.right = pos1 + "px";
}
}
}

#container {
width: 400px;
height: 400px;
position: relative;
background: rgb(240, 240, 231);
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
#animate1 {
width: 50px;
height: 50px;
right:0px;
position: absolute;
background-color: rgb(43, 1, 1);
}

<p>
<button onclick="myMove()">Click Me</button>
</p>
<div id="container">
<div id="animate"></div>
<div id="animate1"></div>
</div>

Answer 2

更新css并将#animate1:的left: 350px;更改为right: 0px;

function myMove() {
var elem = document.getElementById("animate");
var elem1 = document.getElementById("animate1");
var pos = 0;
var pos1 = 0;
var id = setInterval(frame, 5);
var id1 = setInterval(frame1, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + "px";
elem.style.left = pos + "px";
}
}
function frame1() {
if (pos1 == 350) {
clearInterval(id1);
} else {
pos1++;
elem1.style.top = pos1 + "px";
elem1.style.right = pos1 + "px";
}
}
}

#container {
width: 400px;
height: 400px;
position: relative;
background: rgb(240, 240, 231);
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
#animate1 {
width: 50px;
height: 50px;
right: 0px; /* instead of right : 350px; */
top: 2px;
position: absolute;
background-color: rgb(43, 1, 1);
}

<p>
<button onclick="myMove()">Click Me</button>
</p>
<div id="container">
<div id="animate"></div>
<div id="animate1"></div>
</div>

Answer 3

脱离主题，但您知道CSS转换吗？

function myMove() {
document.getElementById("animate").classList.toggle("move");
document.getElementById("animate1").classList.toggle("move");
}
// try clicking the boxes themselves
for (let item of document.querySelectorAll("#animate, #animate1")) {
item.onclick = function() {
item.classList.toggle("move");
}
}

#container {
width: 400px;
height: 400px;
position: relative;
background: rgb(240, 240, 231);
}
#animate {
width: 50px;
height: 50px;
top: 0;
left: 0;
position: absolute;
background-color: red;
transition: 3s linear;
}
#animate.move {
top: 350px;
left: 350px;
}
#animate1 {
width: 50px;
height: 50px;
right: 0px;
top: 2px;
position: absolute;
background-color: rgb(43, 1, 1);
transition: 3s linear;
}
#animate1.move {
top: 350px;
right: 350px;
}

<p>
<button onclick="myMove()">Click Me</button>
</p>
<div id="container">
<div id="animate"></div>
<div id="animate1"></div>
</div>