本文将介绍一款非常方便的 npm 包——transition.css，并分步骤详细介绍其使用方法。transition.css 是一款开源的 CSS 库，可以方便地实现过渡动画效果。
什么是 transition.css
transition.css 是一个基于 CSS3 的过渡动画效果库。它包含多种常见的动画效果，如淡入、淡出、旋转、位移等。通过简单的 HTML 和 CSS，您就能轻松地创建出炫酷的过渡动画效果。
安装 transition.css
使用 npm 安装 transition.css 非常简单。在终端输入以下命令：
npm install transition.css
使用 transition.css
在您的网站中引用 transition.css，可以使用以下方式：
<link rel="stylesheet" href="node_modules/transition.css/dist/transition.min.css">
完成引用后，您就可以开始使用 transition.css 了。例如，以下代码将在 2 秒的时间内将一个被指定为 mydiv 的元素从上方移动到下方：
<div class="mydiv transition-slide-down" style="height: 100px; width: 100px; background-color: red;"></div>
您可以使用下面的 class 来实现不同的过渡动画效果：
- .transition-fade-in：淡入效果
- .transition-fade-out：淡出效果
- .transition-slide-up：从下往上移动
- .transition-slide-down：从上往下移动
- .transition-slide-left：从右往左移动
- .transition-slide-right：从左往右移动
- .transition-rotate：旋转
- .transition-scale：缩放
- .transition-flip-x：沿着 X 轴翻转
- .transition-flip-y：沿着 Y 轴翻转
- .transition-bounce-in：弹跳进入
- .transition-bounce-out：弹跳退出
您只需要将这些 class 添加到您的元素的 class 中即可。例如：
<div class="mydiv transition-scale" style="height: 100px; width: 100px; background-color: blue;"></div>
此元素将在 2 秒内缩小。
自定义 transition.css
transition.css 支持自定义。您可以使用自己的 CSS 定义动画效果，而无需在 JavaScript 中操作 CSS。只需将您的 CSS 文件添加到项目中，然后在您的 HTML 代码中使用您定义的 class 名称即可实现自定义效果。
例如，您可以自定义旋转效果：
-- -------------------- ---- -------
---------- -
--------------- ----------
------------------- ---
-------------------------- -----
-
---------- --------- -
-- -
---------- -------------
-
---- -
---------- ---------------
-
-然后在 HTML 代码中使用您的 class 名称，如下所示：
<div class="mydiv my-rotate" style="height: 100px; width: 100px; background-color: green;"></div>
此元素将在 2 秒内旋转 360 度。
总结
transition.css 是一款非常方便的过渡动画效果库。通过简单的 HTML 和 CSS，您就可以轻松实现各种酷炫的过渡动画效果。此外，它还支持自定义，可以使用自己的 CSS 文件定义动画效果。相信这款库会给您的网站带来更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005590981e8991b448d66d0