Javascript 暂停备用css动画并返回其原点

jQuery.button.clickfunction{ //停止平稳地弹跳 $'.button'。在“animationiteration webkitAnimationIteration”上，函数{ var$this=$this； $this.removeClass'loading'； } }; .按钮{ 位置：绝对位置； 顶部：calc50vh-10px； 左：calc50vw-10px； 高度：100px； 宽度：100px； 边界半径：100%； 背景颜色：绿色； 显示：内联块； 光标：指针； } .装货{ 动画：弹跳1s轻松无限交替； 动画填充模式：正向； } @关键帧反弹{ 来自{transform:translateY0；} 到{transform:translateY-100px；} } 您可以使用getComputedStyle。在jQuery中，您可以通过.css来完成

css方法是从 第一个匹配元素，特别是根据不同的方式 浏览器通过getComputedStyle访问这些属性中的大部分 基于标准的浏览器中的方法与currentStyle和 Internet Explorer中的runtimeStyle属性和不同的术语 浏览器用于某些属性

对于CSS，让我们稍微修改一下。将默认行为设置为暂停动画播放状态：暂停。对于加载，将其设置为运行。暂停的时刻是当您获得处理它的计算样式时

在jQuery中，动画将暂停，然后作为矩阵的CSS变换将被存储并应用于元素，在转换和动画旁边，动画将被设置为“无”。最后，经过一些延迟后，它将运行一个函数来应用变换，以便将元素恢复到起始位置

jQuery.button.clickfunction{ $this=$this； $this.removeClass'loading'； computedTransform=$this.cstransform； $this.css{transform:computedTransform，transition:0.86s，animation:none}.delay20.queuefunction{ $this.cstransform，matrix1,0,0,1,0,0 }; }; .按钮{ 位置：绝对位置； 顶部：calc50vh-10px； 左：calc50vw-10px； 高度：100px； 宽度：100px； 边界半径：100%； 背景颜色：绿色； 显示：内联块； 光标：指针； 动画：弹跳1秒轻松无限交替前进暂停； } .装货{ 动画播放状态：运行； } @关键帧反弹{ 来自{transform:translateY0；} 到{transform:translateY-100px；} }

---

嘿，Alexis，你能提供一点代码吗：当元素出现时，给球添加一个覆盖类，它以你想要的任何方式将球发送回原始位置。如果你的返回动画需要球的当前位置，那么在javascript中计算球的位置，并直接在js中或通过CSS变量将数据提供给CSS。刚刚更新了我的问题，谢谢你的回答。我现在拥有的：单击时，球在顶部或底部完成动画，类被移除。问题是，当它在顶部完成时，当类被移除时，它会跳到底部。我想暂停动画立即顺利地把球带到底部。