是否可以制作一个在调用时不会从起点和终点快速重新开始的动画?
例如:
我有一个动画,它从 top:0px
垂直移动一个 div 到 top:100px
(向下),
另一个动画将此 div 从 top:100px
垂直移动到 top:0px
(向上),
每个动画由不同的按钮 A 和 B 控制。
如果我重复按这些按钮,div 实际上在中间路线
它不会从这个实际的中点重新开始,
但会快速返回到极限起点或终点!
有没有办法让 div 从它到达的实际位置重新开始,当我想起其他动画时?
最佳答案
正如 bjb568 评论的那样,答案是使用过渡而不是动画
CSS
#a {
width: 100px;
height: 100px;
position: absolute;
background-color: green;
transition: top 2s linear;
top: 0px;
}
jQuery
$(document).ready(function(){
$("#b").mousedown(function(){
$("#a").css({"top":"200px"});
});
$("#b").mouseup(function(){
$("#a").css({"top":"0px"});
});
});
关于css - 防止 css 动画在召回时从极端起点和终点重新启动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22852017/