javascript - 在鼠标离开之前捕获 CSS 值

Question

我想在鼠标离开之前获取 transform:rotate 的当前值。在当前状态下，当鼠标已经离开我的按钮并返回 0deg 时，该事件似乎被捕获，此时这是正确的。

我的观点是以反向模式播放相同的动画。为此，我需要获取旋转的当前值并从 Xdeg 转换到 0deg。我首先尝试用完整的 CSS 来完成它，但是当鼠标离开时动画突然中断。我还尝试在鼠标不在按钮上时播放另一个动画，但结果并不像我预期的那么干净，因为它从预定义值开始，而不是当前旋转值。

你可以在这里找到我的 fiddle :https://jsfiddle.net/yn460w6j/

感谢@lakenen对于度函数，顺便说一句!

Answer 1

我很少玩这个，只使用js来解决这个问题。当鼠标悬停在按钮上时，我正在向微调器添加类。接下来，当 mouseleave 时，我将监听器设置为停止动画迭代。完成后，我只需从微调器中删除动画类。

var $spinner = $("#random_glyph");
var $button = $("#random_button");            

$button.on("mouseover", function() { 
    $spinner.addClass('animation');
 });

$button.on("mouseleave", function() {
    $button.bind("webkitAnimationIteration, mozAnimationIteration, animationiteration", function(e){    
        $spinner.removeClass('animation');  
        $(this).unbind(e);
    });
});

https://jsfiddle.net/9jLstovx/