CSS - 悬停时播放动画，但不会突然结束答案

【问题标题】：CSS - Play animation while hovering, but not with an abrupt endCSS - 悬停时播放动画，但不会突然结束
【发布时间】：2017-06-02 15:29:13
【问题描述】：

我正在尝试创建一种加载动画，其中有 3 个条在彼此下方，都有单独的关键帧。

这 3 个条是 div 元素，位于父 div 内。

<div id="menu">
    <div id="menubox1"></div>
    <div id="menubox2"></div>
    <div id="menubox3"></div>
</div>

动画属性分配给单独的menubox id。

#menubox1:after {
    content: '';
    position: absolute;
    bottom: 0px;
    transform: translateY(-50%);
    border-top: 1px solid #FFDADA;

    animation: menukeyframes1;
    animation-duration: 2000ms;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-play-state: inherit;
}

@keyframes menukeyframes1 {
     0% { width: 100%; left:0;}
     ...
}

我的目标是在光标悬停在父 div 上时播放动画。

我的尝试是使用设置为running 或paused 的animation-play-state，具体取决于父级div 是否悬停。

问题是动画在动画完成之前立即暂停，如果它在中途停止看起来有点糟糕。

是否有一个很好的解决方案，最好不使用 JavaScript/jQuery，并且适用于所有浏览器？

【问题讨论】：

我不这么认为。我假设这是你不想要的突然结局？ codepen.io/mcoker/pen/vZBXgY 听起来你想在浏览器中使用animationend 事件触发paused，这需要js。
@MichaelCoker 这正是我目前所拥有的。不过，用 js 实现我的目标最简单、最干净的方法是什么？
jsfiddle.net/sSYYE/55。这是此答案 stackoverflow.com/questions/7694323/… 的略微更新版本。
@WizardCoder 看起来不错！它是否需要我将我的栏从 ids 切换到 classes 还是有其他方法？
jsfiddle.net/sSYYE/56 我已经更新了小提琴，使其与您的代码更相关。

标签： javascript jquery html css animation

【解决方案1】：

正如您所见，目前仅使用 CSS 无法完成，并且已经引用了良好的 jquery 答案，值得一提的是，它可以在几行 vanillaJS 中解决：

var dur = 2000;
document.querySelectorAll('.smooth').forEach(el=>{
  var t;
  el.addEventListener('mouseover',_=>{t = performance.now();el.style.animationPlayState = 'running'})
  el.addEventListener('mouseout',_=>window.setTimeout(()=>el.style.animationPlayState = 'paused',dur-(performance.now()-t)%dur));
})

working pen

非 es6：BABEL

【讨论】：

您的代码有什么特别之处吗？它会抛出一些错误，例如esversion 6 is needed for => arrow 或_ is not defined。
是es6的，如果你不能用也很容易转译，甚至在线：BABEL
加 1 用于使用 vanilla js。很花哨。

【解决方案2】：

您始终可以使用过渡淡出动画 div。这样的事情可能对你有用：

#menubox1 {
  opacity: 0;
  transition: opacity .5s linear;
}

#menu:hover {
  #menubox1 {
    opacity: 1;
    transition: opacity .5s linear;
  }
}

【讨论】：