在前端开发中，动效设计已经成为日常工作的一部分。然而，如何能够快速、高效地实现动效在不同浏览器之间的兼容性是前端开发中必须掌握的能力。其中，timing-function 是实现一些动效时必不可少的一个属性，而 postcss-normalize-timing-functions-nightly 可以帮助我们在不同浏览器之间实现 timing-function 的兼容性，本篇文章将介绍 postcss-normalize-timing-functions-nightly 的使用教程。
什么是 postcss-normalize-timing-functions-nightly
postcss-normalize-timing-functions-nightly 是一个 postcss 插件，用于在不同浏览器之间实现 timing-function 的兼容性。该插件会将某些浏览器不支持的 CSS timing-function 值转换成浏览器支持的值。
安装 postcss-normalize-timing-functions-nightly
安装 postcss-normalize-timing-functions-nightly 很容易，在终端输入以下命令即可:
npm install postcss-normalize-timing-functions-nightly --save-dev
使用 postcss-normalize-timing-functions-nightly
在项目中，我们可以将 postcss-normalize-timing-functions-nightly 配置在 postcss.config.js 文件中，postcss.config.js 结构如下：
module.exports = {
plugins: [
require('postcss-normalize-timing-functions-nightly')
]
}在样式表中使用 postcss-normalize-timing-functions-nightly 的方法也很简单，只需在选择器中使用需要实现兼容的 timing-function 属性即可:
-- -------------------- ---- ------- -- ------ -- ----------- - -------------------------- --------------- -- ----- --- - -- ----- -- ----------- - -------------------------- --------- -------------------------- --------------- -- ----- --- -
在上述代码中，我们使用了 cubic-bezier() 属性实现了一个自定义的动效，而 postcss-normalize-timing-functions-nightly 将会将 cubic-bezier() 转换为浏览器支持的值，从而实现兼容性。
值得注意的是，为了保证视觉效果的连贯性，同时将原始属性值添加在兼容的属性值前面。如上述代码中的 animation-timing-function 值设置了2遍，第一个用于兼容不支持 cubic-bezier() 的浏览器，第二个用于保证谷歌浏览器中的连贯性。
示例代码
在下方的代码中，我们实现了一个简单的动效，该动效使用了 cubic-bezier() 属性，同时增加了 postcss-normalize-timing-functions-nightly 插件用于实现浏览器兼容性。
-- -------------------- ---- -------
---------- -
-------- -----
---------------- -------
------------ -------
------- ------
-
---- -
------ ------
------- -----
---------- -----
----------- -------
------------ -----
----------------- --------
------ -----
-------------- ----
----------- --- --- ---- ------- -- -- -----
------- --------
---------- ---- -- --------------- -- ----- -- -------- ----------
-
-- ----- --
---- -
---------- ---- -- -------- -------- ----------
-------------------------- --------------- -- ----- ---
-
---------- ---- -
---- -
---------- --------------
-
-- -
---------- -----------------
-
-总结
使用 postcss-normalize-timing-functions-nightly 插件可以帮助我们实现浏览器对 CSS timing-function 属性的兼容性，从而使我们在跨浏览器时更加高效地实现动效。同时，该插件的使用也为我们了解前端开发中兼容性处理提供了一个范例。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5effd817403f2923b035bc57