动画不适用于伪元素?IE10.

Animations not working on pseudo-elements? IE10

本文关键字：IE10 元素 不适用 适用于 动画      更新时间：2023-09-26

这对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中，动画不能播放多次。问题是如果我在非伪元素上尝试这个，它会起作用。为什么？

我用切换事件修改你的代码。我还没有尝试过，但它即使在IE10上也应该有效

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

.JS 

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

IE10 尚不支持伪元素上的动画事件（冒泡）。

相关文章：