我的“ div”從頂部移到底部（即，距頂部200像素的高度）並固定在頂部（開始位置）。但我想解決問題，該怎么辦？

Question

我的HTML div元素從top移動bottom並固定在top ，但我想固定在bottom ，我的意思是，我想將div從top固定200px 。

   @keyframes mymove {
      from {top: 0px;}
      to {top: 200px;}
    }
  </style>
  </head>
  <body >
    <input type="button" id="mybtn" onclick="myfunction()" value="click 
   me">
    <div id="abc" style="display:none" >
      <table>
        <tr>
          <td>Name:</td><td><input type="text"></td>
        </tr>
      </table>
    </div>
  </body>
  </html>
  <script>
      function myfunction(){
      document.getElementById("abc").style.display="block";
      document.getElementById("abc").style.width="500px";
      document.getElementById("abc").style.height="100px";
      document.getElementById("abc").style.border="2px solid red";
      document.getElementById("abc").style.position="absolute";
      document.getElementById("abc").style.animation="mymove 1s";
      document.getElementById("abc").style.marginTop="200px";
      document.getElementById("mybtn").style.display="none";
    }
  </script>

我希望我div元素從出來top至bottom和固定在bottom

Answer 1

您必須將forwards屬性添加到動畫中。 因此，您的腳本將如下所示。

 <script>
      function myfunction(){
      document.getElementById("abc").style.display="block";
      document.getElementById("abc").style.width="500px";
      document.getElementById("abc").style.height="100px";
      document.getElementById("abc").style.border="2px solid red";
      document.getElementById("abc").style.position="absolute";
      document.getElementById("abc").style.animation="mymove 1s forwards"; //Here you add forwards
      //document.getElementById("abc").style.marginTop="200px";
      document.getElementById("mybtn").style.display="none";
    }
  </script>

Answer 2

您需要指定希望動畫對象保持動畫的最后位置。

將下一行添加到您的代碼中：

document.getElementById("abc").style.animationFillMode = "forwards";

或者，如果您已經有該元素的CSS定義，則可以將其直接添加到CSS中：

#abc {
    animation-fill-mode: forwards;
}

您可以在MDN上找到更多詳細信息。

我的“ div”從頂部移到底部（即，距頂部200像素的高度）並固定在頂部（開始位置）。但我想解決問題，該怎么辦？

問題描述

2 個解決方案

解決方案1
2 2019-09-05 05:51:42

解決方案2
2 2019-09-05 05:51:48

我的“ div”從頂部移到底部（即，距頂部200像素的高度）並固定在頂部（開始位置）。 但我想解決問題，該怎么辦？

問題描述

2 個解決方案

解決方案1 2 2019-09-05 05:51:42

解決方案2 2 2019-09-05 05:51:48

我的“ div”從頂部移到底部（即，距頂部200像素的高度）並固定在頂部（開始位置）。但我想解決問題，該怎么辦？

解決方案1
2 2019-09-05 05:51:42

解決方案2
2 2019-09-05 05:51:48