我的 HTML div元素从 top 移动至bottom并修复 top ，但我想修复 bottom ，我的意思是，我想修复我的 div 200px来自top 。
@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
最佳答案
您必须将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>
关于javascript - 我的 "div"正在从上到下移动(即距顶部 200 像素的高度)并固定在顶部(起始位置)。但我想固定在底部。我该怎么做？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57798908/