在前端开发中，动画效果在提升用户体验方面发挥着至关重要的作用。inferno-animate-css 是一个能够实现动画效果的 npm 包，它提供了大量的动画效果，使用简便，适用于多种 web 应用。
安装
要想使用 inferno-animate-css，首先需要将其安装到项目中。可以使用 npm 或者 yarn 安装。
npm install -S inferno-animate-css
或
yarn add inferno-animate-css
使用
inferno-animate-css 中提供了一个组件 Animate，可以用来包装需要添加动画效果的元素。示例代码如下：
-- -------------------- ---- ------- ------ - ------- - ---- ---------------------- -------- -------------- -- ------------- ----------------- -- ------ -------------------- -- ------ - ---------- ------------ ----------
其中，visible 属性决定了组件在开始动画前是否可见，enter 属性表示进入动画的名称，leave 属性表示离开动画的名称。inferno-animate-css 中提供了丰富的动画效果，可以在官网或者 github 上查看完整列表。这里是一个例子，通过 slideInUp 和 slideOutDown 给元素增加滑动动画效果。
注意事项
inferno-animate-css 的动画效果可以分为两类：进入动画和离开动画。当组件进入页面时，它会显示进入动画，而当组件离开页面时，它会执行离开动画。需要注意的是，Animate 组件必须保证组件插入或删除时，组件可见性的转换。也就是说，当 visible 属性从 true 转变成 false 时，组件不应当被从 DOM 树中移除，而是应当保留在 DOM 树中，直到离开动画执行完毕之后再移除。
示例代码
代码示例中演示了如何使用 inferno-animate-css 给一个按钮增加动画效果。这里使用了 fadeInDown 作为进入动画名称，使用了 fadeOutUp 作为离开动画名称。
-- -------------------- ---- -------
------ - --------- - ---- ----------
------ - ---- - ---- -----------------
------ - ------- - ---- ----------------------
----- -------------- ------- --------- -
------------------ -
-------------
---------- - -
-------- ----
--
-
------------- -
---------------
-------- -----
---
-
-------- -
------ -
--------
----------------------------
------------------
------------------
------- ------------------------------------------- ------------
----------
--
-
-总结
inferno-animate-css 为前端开发者提供了很好的动画效果，使得页面变得更加生动有趣。在使用这个 npm 包的过程中，我们需要注意组件可见性的转换，以免产生意料之外的结果。希望本文能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005596181e8991b448d6d4e