共计 1293 个字符,预计需要花费 4 分钟才能阅读完成。
转载自:http://waynecz.github.io/2016…
CSS 动画相关属性
transition:兼容性

transform 3D:兼容性

transform 2D:兼容性

animation:

可以看到动画在 IE8(这里主要讨论 IE)及以下完全不支持,IE9 由于只支持 transform(非 transform3d)
优雅降级
<div class="a"></div>
CSS:
<style>
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}
}
</style>
主要功臣自然是 translate3d, 因为 IE9 不支持自然会忽略掉,所以 translate 也在 IE 下不起效了,opacity 等简单属性做个 hack 即可。
用 JQ 动画来替代,还是上面那个例子吧:
首先当然要判断浏览器支不支持要用到的 CSS 属性,判断函数如下:
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() 代替
正文完
发表至: javascript
2019-04-24