javascript - 是否可以对 CSS 动画进行排队(示例)？

Question

我目前使用这个 JS 动画插件:http://www.2meter3.de/code/hoverFlow/我喜欢的独特结果是橙色示例。据我了解，CSS 过渡只能做黄色示例。<​​/p>

有没有办法完全用 CSS 复制它？

如果没有，那么有没有办法使用 CSS 转换，但由 JS (jQuery) 使用相同的原理(两个世界的良好结合)控制？

也许这对我的案子有帮助:http://cortys.de/cssAnimate/

Answer 1

据我所知，仅靠 CSS 是不可能的。

有一个技巧可以make the animation run to the end on hover通过在元素上运行另一个不可见的动画，但如果你想让它恢复动画，那是行不通的。

使用一点 Javascript，您可以在鼠标悬停时向元素添加一个类，然后在动画完成时删除该类:

$('div').mouseenter(function(){
  $(this).addClass('animate');
}).on('transitionend', function(){
  $(this).removeClass('animate');
});

演示:http://jsfiddle.net/Guffa/oq83suw3/

但是，转换结束事件似乎并不总是被触发，因此元素可能会被添加到它们的类卡住。您可以使用超时来删除类:

$('div').mouseenter(function(){
  var e = $(this);
  e.addClass('animate');
  window.setTimeout(function(){
    e.removeClass('animate');
  }, 300);
});

演示:http://jsfiddle.net/Guffa/u3c2knfj/