マウスが去る前にCSS値をキャッチ

Question

私はtransform: rotateの現在の値をマウスが出る直前に取得したいと考えています。現在の状態では、マウスが既にボタンを離れるとこのイベントが捕捉されたように見え、この時点で真である0degを返します。

私の主張は、逆のモードで同じアニメーションを再生することです。そのためには、ローテーションの現在の値を取得し、Xdegから0degに移行する必要があります。私はまず完全なCSSでそれを達成しようとしましたが、マウスが離れると突然アニメーションが壊れます。マウスがボタン上にないときに別のアニメーションを再生しようとしましたが、現在の回転値ではなく、定義済みの値から始まるので、結果は期待どおりではありません。

あなたはここに私のバイオリンを見つけることができます度関数の@lakenenからhttps://jsfiddle.net/yn460w6j/

おかげで、ところで！

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/