我的“ div”从顶部移到底部（即，距顶部200像素的高度）并固定在顶部（开始位置）。 但我想解决问题，该怎么办？
[英]My “div” is moving from top to bottom (i.e 200px height from top) and fix on a top(starting postion). but I want to fix on a bottom.How can I do it?
问题描述
My HTML div element moving from top to bottom and fix on a top , but I want to fix on a bottom , I mean, I want to fix my div 200px from top . 
我的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>
I expect that my div element come out from top to bottom and fix on a bottom 我希望我div元素从出来top至bottom和固定在bottom
2 个解决方案
解决方案1
2 2019-09-05 05:51:42
You have to add forwards property to your animation. 您必须将forwards属性添加到动画中。 So your script will be as follows. 因此，您的脚本将如下所示。
<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>
解决方案2
2 2019-09-05 05:51:48
You need to specify that you want the animated object to keep the last position on the animation. 您需要指定希望动画对象保持动画的最后位置。
Add the next line to your code: 将下一行添加到您的代码中：
document.getElementById("abc").style.animationFillMode = "forwards";
Or if you already have a CSS definition for the element, you can add it directly into the CSS: 或者，如果您已经有该元素的CSS定义，则可以将其直接添加到CSS中：
#abc {
animation-fill-mode: forwards;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.