CSS3 Transition Polyfill

Question

好吧，所以大多数人都会熟悉CSS3 Transitions，我更喜欢它在jQuery动画之上，因为它具有CSS的简单性。我唯一的遗憾是它在IE中不起作用＆lt; 9（一如既往）以及Firefox＆lt; 4，Safari＆lt; 4，等等。我不是指在JavaScript中为JavaScript编写单独的动画。但是我想要一个扫描CSS的方法，抓住动画的速度，必须动画哪些属性，并使它们动画（使用jQuery或其他东西），是否有这样的解决方案，如果是这样，它是什么，哪里可以我知道了吗？

Answer 1

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

https://gist.github.com/1096784

cssSandpaper是一个JS库，旨在解析CSS并为各种CSS3效果动态实现polyfill：

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

还有一个jQuery库以相反的顺序运行，当你调用$ .animate（）时，它会尽可能静默地实现转换：

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

Answer 2

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

IE是个例外，这就是为什么像CSS3Pie这样的polyfill能够工作的原因，但我不相信任何其他浏览器都能让你对他们已经删除的CSS声明有任何可见性，所以Javascript解决方案也需要将CSS文件本身重新加载为纯文本，并在它开始实际实现该功能之前重新解析它。

这样做的含义是，你要求的东西可能在浏览器上太沉重，值得付出努力（特别是因为我们谈论的是旧版本，无论如何都要慢一些。）

一年多以前，{p> This question on SO几乎都在问同样的问题。那时候没有答案，我认为还没有答案。

在答案中提到了一个JQuery插件，它可以满足您的需求，但是相反（即您需要在所有浏览器中将其作为脚本运行，但它使用脚本中的CSS功能，如果它是可用）。我认为那是你最接近的。

Answer 3

尝试使用eCSStender：http://ecsstender.org/extensions/css3-transitions/index.html我们将此用于显示/隐藏元素的相对简单的内容。

Answer 4

addClass/removeClass methods of jQueryUI（非常规！）可以为类的属性设置动画。

var transitionOptions = Modernizr["css3transitions"] ? null : { queue: false, duration: 200, children: false };

$(".selector").addClass("someclass", transitionOptions);