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

archieyang 发布于2019-08-29 18:41 / 3326人阅读

摘要：转载自动画相关属性兼容性兼容性兼容性可以看到动画在这里主要讨论及以下完全不支持，由于只支持非优雅降级初始化元素动画前样式及加入动画现代浏览器下移开元素下移开元素透明元素，是元素不透明主要功臣自然是因为不支持自然会忽略掉，所以也在

转载自：http://waynecz.github.io/2016...

CSS动画相关属性

transition：兼容性

transform 3D：兼容性

transform 2D：兼容性

animation：

可以看到动画在IE8（这里主要讨论IE）及以下完全不支持，IE9由于只支持transform(非transform3d)

优雅降级

CSS：

主要功臣自然是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()代替

GPU云服务器云服务器 css3动画 css简单简单css 高性能css3动画

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114508.html

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

摘要：转载自动画相关属性兼容性兼容性兼容性可以看到动画在这里主要讨论及以下完全不支持，由于只支持非优雅降级初始化元素动画前样式及加入动画现代浏览器下移开元素下移开元素透明元素，是元素不透明主要功臣自然是因为不支持自然会忽略掉，所以也在转载自：http://waynecz.github.io/2016... CSS动画相关属性 transition：兼容性showImg(https://...

QiShare 2019-08-23 17:07 评论0 收藏0
前端动画调研-V1

摘要：支持动画状态的，在动画开始，执行中，结束时提供回调函数支持动画可以自定义贝塞尔曲线任何包含数值的属性都可以设置动画仓库文档演示功能介绍一定程度上，也是一个动画库，适用所有的属性，并且实现的能更方便的实现帧动画，替代复杂的定义方式。动画调研-V1 前言：动画从用途上可以分为两种，一种是展示型的动画，类似于一张GIF图，或者一段视频，另一种就是交互性的动画。这两种都有具体的应用场景，比如...

ddongjian0000 2019-08-23 11:00 评论0 收藏0
前端面试题-渐进增强和优雅降级

摘要：一背景介绍渐进增强和优雅降级这两个概念是在出现之后火起来的。二概念理解渐进增强渐进增强一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果交互追加功能达到更好的体验。一、背景介绍渐进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3，但是 CSS3 特效太优秀不忍放弃，所以在高级浏览器中使用CSS3，而在低级浏览器...

HollisChuang 2019-08-30 14:10 评论0 收藏0
杂谈：渐进增强与优雅降级

摘要：而渐进增强和优雅降级两种不同的开发流程，也是在我们项目初期做调研选型时会考虑的一个点。二者区别渐进增强和优雅降级只是看待同种事物的两种观点。渐进增强和优雅降级都关注于同一网站在不同设备里不同浏览器下的表现程度。作为一名前端开发人员，最头疼的莫过于浏览器兼容。远古时期万恶的IE6，到现在CSS3不兼容的IE7/8.为了保证不同版本浏览器都有共同或更优化的用户体验，前端搬砖的我们不得不与...

hiyang 2019-08-29 16:12 评论0 收藏0
杂谈：渐进增强与优雅降级

摘要：而渐进增强和优雅降级两种不同的开发流程，也是在我们项目初期做调研选型时会考虑的一个点。二者区别渐进增强和优雅降级只是看待同种事物的两种观点。渐进增强和优雅降级都关注于同一网站在不同设备里不同浏览器下的表现程度。作为一名前端开发人员，最头疼的莫过于浏览器兼容。远古时期万恶的IE6，到现在CSS3不兼容的IE7/8.为了保证不同版本浏览器都有共同或更优化的用户体验，前端搬砖的我们不得不与...

王军 2019-08-23 10:29 评论0 收藏0