在前端开发中，CSS 过渡和动画是非常常用的技术之一。然而，在不同的浏览器和版本之间，对 CSS 过渡和动画的支持可能会有所不同。这可能会导致您的网站在某些浏览器中出现问题，因此需要使用 Polyfill 或 Shim 来解决这个问题。
什么是 PolyFill 和 Shim？
Polyfill 是一种 JavaScript 代码，用于模拟浏览器中缺少的原生 API。Shim 与 Polyfill 类似，但它们旨在修复浏览器中已经存在但不完整或有错误的 API。
在本文中，我们将使用 Polyfill 和 Shim 来解决 CSS 过渡和动画在某些浏览器中的兼容性问题。
CSS 过渡和动画的兼容性问题
在许多浏览器中，CSS 过渡和动画都被支持得很好。但是，旧版本的浏览器（如 IE）可能不支持某些 CSS 属性或关键帧动画，这可能会导致效果无法达到期望的效果或根本不起作用。
例如，假设您希望在按钮上应用一个简单的淡入淡出过渡：
button {
transition: opacity .3s ease-in-out;
}
button:hover {
opacity: .8;
}这段 CSS 代码将使按钮在被鼠标悬停时以淡入淡出的方式变为半透明。但是，在旧版本的浏览器中，例如 IE，该效果可能不会生效。
使用 Polyfill 和 Shim 解决问题
为了解决这个兼容性问题，我们可以使用两个 JavaScript 库：CSS3 transitions and animations Polyfills 和 CSS3 transition Shim。
CSS3 transitions and animations Polyfills
CSS3 transitions and animations Polyfills 是一个用于模拟过渡和动画的 JavaScript 库。它适用于大多数现代浏览器，包括 IE9+。
要使用此 Polyfill，请将以下代码添加到您的页面中：
<script src="//cdn.jsdelivr.net/gh/web-animations/web-animations-js/web-animations.min.js"></script>
然后，当您使用 CSS 过渡和动画时，这个 Polyfill 将自动为旧版浏览器提供支持。
CSS3 transition Shim
CSS3 transition Shim 是一个用于修复 transitionend 事件的 JavaScript 库。该事件用于检测 CSS 过渡何时结束，并触发相应的回调函数。然而，在一些旧版本的浏览器中，transitionend 事件可能无法正常工作。
要使用此 Shim，请将以下代码添加到您的页面中：
<script src="//cdn.jsdelivr.net/gh/kapetan/jquery-mobile-events/mobile-events.min.js"></script>
然后，当您在 JavaScript 代码中使用 transitionend 事件时，这个 Shim 将自动修复它并提供兼容性支持。
示例代码
以下是一个使用 CSS3 transitions and animations Polyfills 和 CSS3 transition Shim 的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
-------
------ -
----------- ------- --- ------------
-
------------ -
-------- ---
-
--------
------- --------------------------------------------------------------------------------------------
------- ---------------------------------------------------------------------------------------
-------
------
------------- -----------
--------
--- ------ - ---------------------------------
---------------------------------------- ---------- -
----------------------- --------
---
---------
-------
-------以上示例演示了如何在按钮上应用一个
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31386