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()代替


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

查看所有标签

猜你喜欢:

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

Release It!

Release It!

Michael T. Nygard / Pragmatic Bookshelf / 2007-03-30 / USD 34.95

“Feature complete” is not the same as “production ready.” Whether it’s in Java, .NET, or Ruby on Rails, getting your application ready to ship is only half the battle. Did you design your system to......一起来看看 《Release It!》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

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

HTML 编码/解码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码