CSS动画优雅降级简单总结
时间：2023-03-30 13:40:52
CSS
转载自：http://waynecz.github.io/2016...CSS动画相关属性transition:compatibility??transform3D:compatibility??transform2D:compatibility??animation:??可以在IE8中看到动画（这里主要讨论IE）和下面根本不支持。IE9只支持transform（不支持transform3d）优雅地降级
CSS:主角自然是translate3d，因为IE9不支持，会被忽略，所以translate在IE下不起作用，opacity等简单的属性都可以hack。改用JQ动画，还是上面的例子：首先，当然要判断浏览器是否支持要使用的CSS属性。判断函数如下：functionisSupportThis(attrName){varprefixes=['webkit','Moz','ms','o'],i,humpString=[],htmlStyle=document.documentElement.style,//意志阿尼玛tion-delay的bar转化为htmlStyle中的驼峰属性名toHumb=function(string){returnstring.replace(/-(\w)/g,function($0,$1){return$1.toUpperCase();});};for(iinprefixes){humpString.push(toHumb(prefixs[i]+'-'+attrName))};humpString.push(toHumb(attrName));for(iinhumpString){if(humpString[i]inhtmlStyle)returntrue};returnfalse}isSupportThis('animation')//如果IE9下false不支持，则animate$('.a').当然，如果动画元素很多，就很复杂了。我们可以给需要动画的元素提前加上cla??ss="animation"，方便处理。animation-delay也可以用delay()代替
