在鼠标离开之前捕获 CSS 值

Question

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

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

你可以在这里找到我的小提琴：https://jsfiddle.net/yn460w6j/

感谢@lakenen的学位功能，顺便说一句！

Answer 1

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

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/