CSS3 过渡 Polyfill [关闭]答案

【问题标题】：CSS3 Transition Polyfill [closed]CSS3 过渡 Polyfill [关闭]
【发布时间】：2015-10-26 17:42:20
【问题描述】：

好吧，所以你们中的大多数人都会熟悉 CSS3 过渡，我更喜欢它而不是 jQuery 动画，因为它具有 CSS 的简单性。我唯一的遗憾是它不适用于 IE

【问题讨论】：

标签： javascript css progressive-enhancement css-transitions

【解决方案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

【讨论】：

【解决方案2】：

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

IE 是个例外，这就是为什么像 CSS3Pie 这样的 polyfill 能够工作的原因，但我不相信任何其他浏览器都能让您看到它们已删除的 CSS 声明，因此还需要 Javascript 解决方案以纯文本形式重新加载 CSS 文件本身，并重新解析它，甚至在它开始实际实现该功能之前。

这意味着您所要求的内容可能对浏览器来说太重了，不值得付出努力（特别是因为我们谈论的是较旧的版本，反正速度较慢）。

This question on SO 一年多以前问的几乎一样。那时还没有答案，我想现在也没有。

虽然在答案中提到了一个 JQuery 插件，它可以执行您想要的操作，但反过来（即您需要在所有浏览器中将其作为脚本运行，但它使用脚本中的 CSS 功能，如果它是可用的）。我想这是你能得到的最接近的结果。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：