平滑动画停止

Posted 2023-03-06

【中文标题】平滑动画停止

【英文标题】：Smooth animation stop

【发布时间】：2017-03-29 20:21:00

【问题描述】：

选中复选框时，div 正在跳跃。当您取消选中该复选框时 - div 立即移动到初始位置。

是否可以顺利完成最后一次动画迭代，然后只使用CSS而不使用JS？

#jumping-div 
  width: 100px;
  height: 100px;
  margin-top: 100px;
  background-color: red;

@keyframes jump 
  0% 
    transform: scaleY(1) translateY(0);
  
  50% 
    transform: scaleY(0.8) translateY(-70%);
  

#toggle:checked ~ #jumping-div 
  animation-name: jump;
  animation-duration: 2.0s;
  animation-iteration-count: infinite;

<input type="checkbox" id="toggle"><label for="toggle">jump</label>
<div id="jumping-div"></div>

【参考方案1】：

没有 JS 是不可能的。 您可以使用 CSS 执行的操作是，取消选中该复选框会暂停动画，如果您再次选中该复选框，则会继续：

#toggle:checked ~ #jumping-div 
  animation-play-state:running;


#jumping-div 
  animation-play-state:paused;
  animation-name: jump;
  animation-duration: 2.0s;
  animation-iteration-count: infinite;

如果你想完成动画，你可以使用这里讨论的 WITH JS 解决方案： Stopping a CSS animation but letting its current iteration finish