使用javascript的动画-如何向上移动对象

Question

以下是我的代码，在容器框内有一个小框，单击按钮，它会朝下移动并撞击容器的底部，然后从那里升起。 但是相反，它开始在同一位置快速闪烁。 请告诉我一旦箱子撞到底部怎么抬起箱子。

    <style>
        #myContainer {
        width: 400px;
        height: 400px;
        position: relative;
        background: yellow;
       }
      #myAnimation {
        width: 50px;
       height: 50px;
       position: absolute;
       background: red;
      }
 </style>
  <p>
      <button id=button>Click Me</button> 

 </p>

  <div id ="myContainer">
         <div id ="myAnimation">Fish</div>
   </div>

  <script>
   button =document.getElementById("button");
   button.onclick = function() {
var elem = document.getElementById("myAnimation");
var pos = 0;
var id = setInterval(frame, 10);
function frame() {
    /*if (pos == 350) {
        clearInterval(id);
    } 
    else*/

        if(pos<175)

    {
        pos++;
        elem.style.top = 2*pos + 'px';
        elem.style.left = pos + 'px';
    }
    else
    {
            pos--;
        elem.style.top = pos + 'px';
        elem.style.right = pos + 'px';
             }
      }
   } 
   </script>

Answer 1

您好， 提出了一些解决方案，您需要先进行开关，直到向上移动，然后逐渐向下移动。

button =document.getElementById("button");
   button.onclick = function() {
var elem = document.getElementById("myAnimation");
var pos = 0, up=false;
var id = setInterval(frame, 10);

function frame() {
console.log(up, pos);
    /*if (pos == 350) {
        clearInterval(id);
    } 
    else*/

        if(pos<175 && !up)

    {
        pos++;
        if(pos===175) up=true;
        elem.style.top = pos + 'px';
        elem.style.left = pos + 'px';
    }
    else
    {
            pos--;
            if(pos<=0) up=false;
        elem.style.top = pos + 'px';
        elem.style.left = pos + 'px';
             }
      }
   }