HTML DIV 没有从右到左斜向末端移动答案

【问题标题】：HTML DIV is not moving from right to left diagonally towards endHTML DIV 没有从右到左斜向末端移动
【发布时间】：2020-09-16 14:48:52
【问题描述】：

      <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

【问题讨论】：

标签： javascript html css animation css-selectors

【解决方案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>

【讨论】：

【解决方案2】：

更新您的 css 并将 left: 350px; 更改为 right: 0px; for #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>

【讨论】：

【解决方案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>

【讨论】：