Анимации, не работающие над псевдоэлементами? IE10

Question

Это проблема для 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 анимация не может воспроизводиться более одного раза. Дело в том, что если я попробую это на не-псевдоэлементе, он работает. Зачем?

Answer 1

Я изменяю ваш код с помощью события переключения. Я не пробовал, но он должен работать даже на IE10

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

JS

$("div").bind("mouseenter mouseleave", function() { 
    $(this).toggleClass("skew"); 
}); 

Answer 2

IE10 еще не поддерживает анимационные мероприятия (Bubbling) на псевдо-элементов.