HTML DIV 没有从右向左斜向移动到最后

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>

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

Answer 1

.animate1 类已经 left:350px 使它到 right: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 并改变left: 350px; right: 0px; 对于#animate1 ：

 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>