Question

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

有没有办法用CSS纯粹复制这个？

如果没有，那么有一种方法可以使用CSS转换，但是由JS（jQuery）控制使用相同的原理（两个世界的良好组合）？

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/

是否可以对CSS动画进行排队（示例）？

1 个答案: