HTML DIV不会从右向左对角移动到结尾

如何解决HTML DIV不会从右向左对角移动到结尾

      <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个cubes（div）。单击按钮时，左立方体应从左向右移动直到对角线的尽头，而右立方体应从右向左移动对角线直到容器的尽头。但是，只有左方立方体从左向右移动，而右方立方体从顶向底部移动。 我希望将右立方体从对角线向右移动到容器的末端。这是我的沙盒链接。 https://codesandbox.io/s/autumn-sun-uz961?file=/index.html

解决方法

.animate1类的左边是：350px，使其右边变成：0：它将起作用。

context.contentResolver.openFileDescriptor(fileUri,"w")?.use {

    val fileDescriptor = it
    FileOutputStream(it.fileDescriptor).use {
        printAdapter.onWrite(
            arrayOf(PageRange.ALL_PAGES),fileDescriptor,CancellationSignal(),object : WriteResultCallback() {

            })

    }


}

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);
    }

,

更新您的CSS，并将left: 350px;的{​​{1}}更改为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,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);
}

,

主题外，但是您知道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,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);
  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>