javascript CSS3 过渡填充
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6974648/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 Transition Polyfill
提问by Rigel Glen
Alright, so most of you will be familiar with CSS3 Transitions, I prefer it above jQuery animations as it has the simplicity of CSS. My only regret is that it doesn't work in IE < 9( As always ) as well as Firefox < 4, Safari < 4, etc. I do not mean writing separate animations in JavaScript just for IE. But I want a solution that will scan the CSS, grab the speed of the animations, which properties have to be animated, and animate them ( using jQuery, or something else ), is there such a solution if so what is it and where can I obtain it ?
好的，所以你们大多数人都会熟悉 CSS3 过渡，我更喜欢它而不是 jQuery 动画，因为它具有 CSS 的简单性。我唯一的遗憾是它在 IE < 9（一如既往）以及 Firefox < 4、Safari < 4 等中不起作用。我不是说只为 IE 在 JavaScript 中编写单独的动画。但我想要一个解决方案来扫描 CSS，获取动画的速度，哪些属性必须被动画化，并为它们设置动画（使用 jQuery 或其他东西），是否有这样的解决方案，如果有的话，它是什么以及在哪里可以我得到了吗？
采纳答案by Barney
It is possible to detect supported CSS properties, provided you're aware in advance of what browser vendor prefixes you need to sniff for. I've written a gist for the mechanism:
可以检测受支持的 CSS 属性，前提是您事先知道需要嗅探哪些浏览器供应商前缀。我已经为该机制编写了一个要点：
https://gist.github.com/1096784
https://gist.github.com/1096784
cssSandpaper is a JS library that aims to parse CSS and dynamically implement polyfills for various CSS3 effects:
cssSandpaper 是一个 JS 库，旨在解析 CSS 并动态实现各种 CSS3 效果的 polyfill：
http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/
http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/
There is also a jQuery library that operates in reverse order, and silently implements transitions where possible when you call $.animate():
还有一个 jQuery 库以相反的顺序运行，并在您调用 $.animate() 时在可能的情况下静默实现转换：
回答by Spudley
Sadly, most browsers drop any unsupported CSS declarations when they are rendering pages, meaning that if a browser doesn't support a given CSS feature, you won't be able to look at an element's styleproperty and see that feature's stylesheet entry, even if it was in your CSS file.
遗憾的是，大多数浏览器在渲染页面时会删除任何不受支持的 CSS 声明，这意味着如果浏览器不支持给定的 CSS 功能，您将无法查看元素的style属性并查看该功能的样式表条目，即使它在你的 CSS 文件中。
IE is the exception to this, which is why polyfills like CSS3Pie are able to work, but I don't believe any other browser gives you any visibility of CSS declarations which they've dropped, so a Javascript solution would also need to re-load the CSS file itself as plain text, and re-parse it, before it even began to actually implement the feature itself.
IE 是一个例外，这就是为什么像 CSS3Pie 这样的 polyfills 能够工作的原因，但我不相信任何其他浏览器都能让您看到它们已经删除的 CSS 声明，因此 Javascript 解决方案也需要重新 -将 CSS 文件本身作为纯文本加载，并在它甚至开始实际实现功能本身之前重新解析它。
The implications of this are that what you're asking for would probably be too heavy on the browser to be worth the effort (particularly since we're talking about older versions, which are slower anyway).
这意味着您所要求的浏览器可能过于繁重而不值得付出努力（特别是因为我们正在谈论旧版本，无论如何它们都较慢）。
This question on SOwas asking pretty much the same thing, over a year ago. There wasn't an answer then, and I don't think there is still.
一年多以前，关于 SO 的这个问题几乎问了同样的问题。当时没有答案，我认为现在也没有。
There was a JQuery plugin mentioned in an answer, though, which does what you want, but in reverse (ie you need to run it as a script in all browsers, but it uses the CSS feature within the script, if it's available). That's the closest you're going to get, I think.
不过，在答案中提到了一个 JQuery 插件，它可以满足您的需求，但反过来（即您需要在所有浏览器中将其作为脚本运行，但它使用脚本中的 CSS 功能（如果可用））。我想，这是你最接近的一次。
回答by Armadillo Jim
Try eCSStender: http://ecsstender.org/extensions/css3-transitions/index.htmlWe used this for a relatively simple one to show/hide an element.
试试 eCSStender：http://ecsstender.org/extensions/css3-transitions/index.html 我们用它来实现一个相对简单的显示/隐藏元素。
回答by br4nnigan
The addClass/removeClass methods of jQueryUI(not regular!) can animate the properties of a class.
jQueryUI的addClass/removeClass 方法（不是常规的！）可以为类的属性设置动画。
var transitionOptions = Modernizr["css3transitions"] ? null : { queue: false, duration: 200, children: false };
$(".selector").addClass("someclass", transitionOptions);
