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

栏目: CSS · 发布时间: 6年前

内容简介:转载自:transition:兼容性

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

CSS动画相关属性

transition:兼容性



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

transform 3D:兼容性



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

transform 2D:兼容性



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

animation:



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

可以看到动画在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()代替


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

C++程序设计

C++程序设计

谭浩强 / 清华大学出版社 / 2004-6-1 / 36.00元

《C++程序设计》作者深入调查了我国大学的程序设计课程的现状和发展趋势,参阅了国内外数十种有关C++的教材,认真分析了学习者在学习过程中遇到的困难,研究了初学者的认识规律。在本书中做到准确定位,合理取舍内容,设计了读者易于学习的教材体系,并且以通俗易懂的语言化解了许多复杂的概念,大大减少了初学者学习C++的困难。C++是近年来国内外广泛使用的现代计算机语言,它既支持面向过程的程序设计,也支持基于对......一起来看看 《C++程序设计》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具