Question

我有一个关键帧动画，我相信IE 10是唯一能够播放此动画的IE浏览器。如果浏览器是IE浏览器并保持其他状态（Chrome，Safari，FireFox），我怎么能去删除这个动画呢？

动画如下所示：

// Animations
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in { 
    opacity: 0; 
    -webkit-animation: fadeIn ease-in 1; 
    -moz-animation: fadeIn ease-in 1; 
    animation: fadeIn ease-in 1; 
    -webkit-animation-fill-mode: forwards; 
    -moz-animation-fill-mode: forwards; 
    animation-fill-mode: forwards; 
    -webkit-animation-duration: .5s; 
    -moz-animation-duration: .5s; 
    animation-duration: .5s;
}
.fade-in.one { 
    -webkit-animation-delay: 0.5s; 
    -moz-animation-delay: 0.5s; 
    animation-delay: 0.5s;
}
.fade-in.two { 
    -webkit-animation-delay: 1.2s; 
    -moz-animation-delay: 1.2s; 
    animation-delay: 1.2s;
}

小提琴 http://jsfiddle.net/mkerny45/6yYC9/

Answer 1

使用条件注释关闭动画。你需要使用javascript来附加ie10的cc，它应该是这样的：

<!--[if !IE]><!-->  
<script> 
// detect ie10, attach class of ie10 to html element 
if(/*@cc_on!@*/false){document.documentElement.className+=' ie10';}  
</script>  
<!-->![endif]-->  
<style>  
.ie10 .animationclass{}  
</style>

你可以在这里查看要点：https://gist.github.com/jalbertbowden/5174156
这里的脚本工作演示：http://dev.bowdenweb.com/ua/browsers/ie/ie10-detection-via-cc.html

Answer 2

我找到IE10 does not read conditional comments anymore.。

所以你可以使用jQuery：

if ($.browser.msie && $.browser.version == 10) {
  $("html").removeClass("someClass");
}

或JavaScript：

if(Function('/*@cc_on return document.documentMode===10@*/')()){
  document.documentElement.className ='';
}

如何删除仅在IE中出现的动画？

2 个答案: