CSS3过渡多边形

CSS3 Transition Polyfill

本文关键字：多边形 CSS3      更新时间：2023-09-26

好了，所以你们大多数人都熟悉CSS3过渡，我更喜欢它比jQuery动画，因为它有CSS的简单性。我唯一的遗憾是，它不能在IE <9(一如既往)以及Firefox <4、Safari <4,等等。我并不是说用JavaScript为IE编写单独的动画。但我想要一个解决方案，将扫描CSS，抓取动画的速度，哪些属性必须动画，并动画他们(使用jQuery，或其他东西)，有这样的解决方案，如果有，它是什么，我可以从哪里获得它?

如果您事先知道需要嗅探哪些浏览器供应商前缀，则可以检测受支持的CSS属性。我已经为这个机制写了一个要点:

https://gist.github.com/1096784

cssSandpaper是一个JS库，旨在解析CSS并动态实现各种CSS3效果的多边形:

http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/

还有一个jQuery库，它以相反的顺序操作，当你调用$.animate()时，它会在可能的情况下静默地实现过渡:

https://github.com/louisremi/jquery.transition.js

遗憾的是，大多数浏览器在渲染页面时会删除任何不支持的CSS声明，这意味着如果浏览器不支持给定的CSS特性，您将无法查看元素的style属性并看到该特性的样式表条目，即使它在您的CSS文件中。

IE是一个例外，这就是为什么像CSS3Pie这样的polyfill能够工作，但我不相信任何其他浏览器会给你任何可见的CSS声明，他们已经放弃了，所以一个Javascript解决方案还需要重新加载CSS文件本身作为纯文本，并重新解析它，甚至开始实际实现的功能本身。

这意味着你所要求的可能对浏览器来说太重了，不值得付出努力(特别是因为我们谈论的是旧版本，无论如何都比较慢)。

一年前，SO上的这个问题几乎是同样的问题。那时没有答案，我想现在也没有。

有一个在回答中提到的JQuery插件，虽然，它做你想要的，但相反(即你需要在所有浏览器中运行它作为一个脚本，但它使用脚本中的CSS功能，如果它是可用的)。我想这是最接近的了

试试eCSStender: http://ecsstender.org/extensions/css3-transitions/index.html我们用它来显示/隐藏一个相对简单的元素

jQueryUI的addClass/removeClass方法(不是常规的!)可以动画类的属性。

var transitionOptions = Modernizr["css3transitions"] ? null : { queue: false, duration: 200, children: false };
$(".selector").addClass("someclass", transitionOptions);
相关文章：