CSS3 Transition Polyfill

Question

好吧,所以你们大多数人都会熟悉CSS3 Transitions,我更喜欢它在jQuery动画之上,因为它具有CSS的简单性.我唯一的遗憾是它在IE <9(一如既往)以及Firefox <4,Safari <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文件本身作为纯文本加载,并在它开始实际实现该功能之前重新解析它.

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

一年前,关于SO的这个问题提出了几乎相同的问题.那时候没有答案,我认为还没有.

然而,答案中提到了一个JQuery插件,它可以满足您的需求,但反之亦然(即您需要在所有浏览器中将其作为脚本运行,但它使用脚本中的CSS功能,如果可用的话).我认为那是你最接近的.