1

これは特に IE10 の問題です。疑似要素をアニメーション化しています。疑似要素にカーソルを合わせる.skewと、それにクラスが追加され、CSS アニメーションがトリガーされます。アニメーションが終了したら、そのクラスをanimationend削除します。.skew

少なくとも Chrome と Firefox ではそうなりますが、IE10 では.skewクラスが追加されますが、アニメーションが終了しても削除されません。それが事実かどうかは正確にはわかりませんが、疑似要素を最初にホバーするとアニメーションがトリガーされますが、再度ホバーするとアニメーションがトリガーされない可能性があります (これは、.skewクラスが最後に削除されなかったことを意味します)前のアニメーション)。

ここを参照してください： http://jsfiddle.net/Ldh5g/

$("div").bind("animationend webkitAnimationEnd oAnimationEnd", function(){
  $(this).removeClass("skew");  
});

$("div").mouseenter(function(){
    $(this).addClass("skew");
});

疑似要素がホバーされるたびに、アニメーションが再生されます。これは、Chrome と Firefox に当てはまります。ただし、IE10 では、アニメーションを複数回再生することはできません。問題は、非疑似要素でこれを試してみると、うまくいくということです。なんで？

4

2 に答える 2

0

トグル イベントでコードを変更します。試していませんが、IE10でも動作するはずです

http://jsfiddle.net/Ldh5g/4/

JS

$( "div" ).bind( "mouseenter mouseleave", function() {
  $( this ).toggleClass("skew");
});
于 2013-10-02T16:41:25.837 に答える
0

ie10 は、疑似要素でのアニメーション イベント (バブリング) をまだサポートしていません。

于 2013-10-30T05:56:12.313 に答える