简介
react-mount-animate 是一个 React 组件，它可以在组件曝光或隐藏的时候实现动画效果。它是基于组件的 mount 和 unmount 事件进行监听，并且可以添加自定义的进入和离开动画。
安装
你可以使用 npm 来安装 react-mount-animate：
npm install react-mount-animate --save
使用
基础使用
-- -------------------- ---- -------
------ ----- ---- -------
------ ------------ ---- ---------------------
----- --- - -- -- -
------------- -------------------------
---------- -----------
---------------
-
------ ------- ---在这个例子中，我们导入了 MountAnimate 组件并将其包裹在一个标题标签 h1 中。我们将 animationName 属性设置为 'fadeInUp'，这是一个预定义的 CSS 类，可以在 react-mount-animate 的样式表中找到。
自定义进入和离开动画
你可以使用自定义 CSS 类定义进入和离开动画。你可以通过将类名指定为 animationName 属性的值来应用它们。
-- -------------------- ---- -------
--------------- -
---------- ------------- ---
-
-------------- -
---------- ------------ ---
-
---------- ------------- -
---- -
-------- --
---------- -------------- ----- ---
-
-- -
-------- --
---------- -------------- -- ---
-
-
---------- ------------ -
---- -
-------- --
---------- -------------- -- ---
-
-- -
-------- --
---------- -------------- ------ ---
-
--- -------------------- ---- -------
------ ----- ---- -------
------ ------------ ---- ---------------------
----- --- - -- -- -
------------- -------------------------
---------- -----------
---------------
-
------ ------- ---在这个例子中，我们定义了两个 css 类: fadeInUp-enter 和 fadeInUp-exit，这些类定义了进入和离开的动画的具体实现。我们在 MountAnimate 组件中指定了 'fadeInUp' 作为 animationName 属性的值。
回调事件
你还可以使用回调事件来在动画完成后执行一些操作。可以使用 onEnter 和 onExit 属性来调用 MountAnimate 中的回调函数。
-- -------------------- ---- -------
------ ----- ---- -------
------ ------------ ---- ---------------------
------ -------------
----- ----------- - -- -- ---------------------- ---------
----- ---------- - -- -- ---------------------- --------
----- --- - -- -- -
------------- ------------------------ --------------------- --------------------
---------- -----------
---------------
-
------ ------- ---在这个例子中，我们定义了 handleEnter 函数和 handleExit 函数来执行当组件进入和退出时的操作。我们将这些函数指定为 onEnter 和 onExit 属性的值，它们被称为 MountAnimate 的回调函数。
结论
react-mount-animate 是一个优秀的 React 动画库，其中有许多功能可以帮助你创建动态和流畅的 UI。如果你想要学习更多关于 React 动画库的知识，你可以查看官方文档。我希望这个教程能够帮助你开始使用 react-mount-animate，并为你的下一个项目提供一些有用的指导。
完整代码：
-- -------------------- ---- -------
------ ----- ---- -------
------ ------------ ---- ---------------------
------ -------------
----- ----------- - -- -- ---------------------- ---------
----- ---------- - -- -- ---------------------- --------
----- --- - -- -- -
------------- ------------------------ --------------------- --------------------
---------- -----------
---------------
-
------ ------- ----- -------------------- ---- -------
--------------- -
---------- ------------- ---
-
-------------- -
---------- ------------ ---
-
---------- ------------- -
---- -
-------- --
---------- -------------- ----- ---
-
-- -
-------- --
---------- -------------- -- ---
-
-
---------- ------------ -
---- -
-------- --
---------- -------------- -- ---
-
-- -
-------- --
---------- -------------- ------ ---
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600554af81e8991b448d1e52