CSS动画优雅降级的简单总结

前端
评论

虽然一直在现在的项目中用css动画，但是没去仔细思考兼容问题，现在做个思路总结

列几个 CSS动画相关属性的兼容图:

  1. animation / keyframes 浏览器支持情况 :
    animation浏览器支持情况
  2. transform 2D 浏览器支持情况 :
    transform2D浏览器支持情况
  3. transform 3D / perspective 浏览器支持情况 :
    transform2D浏览器支持情况
  4. transition 浏览器支持情况 :
    transition 浏览器支持情况

可以看到动画在IE8（这里主要讨论IE）及以下完全不支持，IE9由于只支持transform(非transform3d)所以也和css动画 say goodbye 了。
但是项目一定要兼容IE9，又不肯因为一个浏览器放弃整个迪士尼，怎么办？

优雅降级咯，先说下一个简单的小例子：一个元素在页面加载时渐进入页面，上面可以看到气势IE9不支持animation和transform3d以及transition，所以一个的方案就是让IE9没有动画（主要就是让IE9下元素呆在动画结束的最后位置），这里元素初始状态需要在画面外并且是隐身，看代码

HTML

1
<div class="a"></div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
div {
  width: 100px;
  height: 100px;
  background: #3ea5ff;
}
.a { /*a初始化元素动画前样式及加入动画*/
  transform: translate3d(-300px,0,0);/*现代浏览器下移开元素*/
  -ms-transform: translate3d(-300px,0,0);/*IE10+下移开元素*/
  opacity: 0;/*透明元素*/
  opacity:1\9\0; /*IE9hack，是元素不透明*/
  animation: leftIn .7s ease-out forwards;  
  
}
@keyframes leftIn {
  0% {transform: translate3d(-300px,0,0);opacity: 0}
  100% {transform: translate3d(0,0,0);opacity: 1}
}

好简单是不是。。主要功臣自然是translate3d,因为IE9不支持自然会忽略掉，所以translate也在IE下不起效了，opacity等简单属性做个hack即可。

接下来随便写下第二种的思路，用JQ动画来替代，还是上面那个例子吧：
首先当然要判断浏览器支不支持要用到的CSS属性，判断函数如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function isSupportThis(attrName) {
	var prefixs = ['webkit', 'Moz', 'ms', 'o'],
		i,
		humpString = [],
		htmlStyle = document.documentElement.style,
		// 将animation-delay这种带杠转化为htmlStyle中的驼峰属性名
		toHumb = function (string) {
 			return string.replace(/-(\w)/g, function ($0, $1) {
				return $1.toUpperCase();
			});
		};
 
	for (i in prefixs) {
		humpString.push(toHumb(prefixs[i] + '-' + attrName))
	};
 
	humpString.push(toHumb(attrName));
 
	for (i in humpString) {
		if (humpString[i] in htmlStyle) return true
	};
 
	return false
}
isSupportThis('animation') // IE9下false

然后如果不支持的话就对$('.a')做下动画处理，当然，如果动画元素很多且很杂，我们可以事先未那些要进行动画的元素统一加上class="animation"之类的后面好处理，animation-delay之类的也可以用delay()代替

就到这