其他分享
首页 > 其他分享> > 前端开发入门到实战:动画优雅降级的简单总结

前端开发入门到实战:动画优雅降级的简单总结

作者:互联网

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

CSS动画相关属性

transition:兼容性

transform 3D:兼容性

transform 2D:兼容性

animation:
image

可以看到动画在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’)做下动画处理,当然,如果动画元素很多且很杂,我们可以事先未那些要进行动画的元素统一加上之类的后面好处理,animation-delay之类的也可以用delay()代替

为了帮助大家让学习变得轻松、高效,给大家免费分享一大批资料,帮助大家在成为前端工程师,乃至全栈工程师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习圈:784783012 欢迎大家进群交流讨论,学习交流,共同进步。
当真正开始学习的时候难免不知道从哪入手,导致效率低下影响继续学习的信心。
但最重要的是不知道哪些技术需要重点掌握,学习时频繁踩坑,最终浪费大量时间,所以有效资源还是很有必要的。

标签:opacity,动画,降级,humpString,transform,animation,translate3d,前端开发
来源: https://blog.csdn.net/kaixinyitian77/article/details/90551603