介绍
preact-transition-group 是一个基于 React、Preact 的过渡动画库，它可以帮助我们在组件创建和销毁的时候加上过渡动画效果。使用 preact-transition-group 可以使得页面在视觉上变得更加流畅美观，提升用户体验。
安装
preact-transition-group 可以通过 npm 安装：
- --- ------- -----------------------
使用
基础使用
preact-transition-group 的使用非常简单，只需要在需要过渡动画的组件外层加上 <TransitionGroup> 组件，然后在需要加上过渡动画的组件上加上 <CSSTransition> 组件即可。
------ - ---------------- ------------- - ---- --------------------------
-------- ----- -
----- ------ -------- - ----------------
------ -
-----
------- ----------- -- -------------------------------
---------------- -----------------
----- -- -
--------------
-----------------
-------------
-------------
-
---- -------------------------- -----------
----------------
--
------------------
------
--
-在上面的示例中，我们使用了 preact-transition-group 提供的 CSSTransition 组件，将需要加上过渡动画的组件包裹了起来。同时，我们还指定了 TransitionGroup 的 component 属性为 null，这样可以避免 TransitionGroup 在页面中多余的 DOM 元素。
动画类名
preact-transition-group 提供了一些默认的动画类名，这些类名可以帮助我们快速创建动画效果，而无需手动编写 CSS 样式。具体的类名如下：
| 类名 | 作用 |
|---|---|
| enter | 进入前的样式 |
| enter-active | 进入时的样式 |
| enter-done | 进入后的样式 |
| exit | 离开前的样式 |
| exit-active | 离开时的样式 |
| exit-done | 离开后的样式 |
| appear | 初始状态 |
| appear-active | 初始状态到进入状态的过渡效果，需要设置 appear={true} 才会生效 |
在 <CSSTransition> 组件上使用 classNames 属性可以指定动画类名的前缀，如：
-------------- ----------------- ------------- --------------
在上面的示例中，我们指定了动画类名的前缀为 fade，preact-transition-group 会自动帮我们添加前缀，并在 CSSTransition 组件不同的生命周期中添加相应的动画类名。
自定义动画
如果默认的动画效果无法满足我们的需求，我们可以自定义动画效果。我们只需要编写自己的 CSS 样式，然后在 <CSSTransition> 组件上指定对应的动画类名即可。
----------- - -------- -- - ------------------ - -------- -- ----------- ------- ------ - ---------- - -------- -- - ----------------- - -------- -- ----------- ------- ------ -
--------------
-------------
------ -------------
------------ --------------------
----- ------------
----------- -------------------
--
-------------
-------------
-
---- -------------------------- -----------
----------------在上面的示例中，我们定义了一个新的动画类名前缀 fade，并编写了两个动画效果：
fade-enter和fade-enter-active：元素进入的时候，透明度从 0 变为 1。fade-exit和fade-exit-active：元素离开的时候，透明度从 1 变为 0。
生命周期
preact-transition-group 提供了三个基本的生命周期方法，分别为：
- onEnter
- onEntering
- onEntered
这三个方法分别对应着 CSSTransition 组件在进入过程中的三个状态：
onEnter：组件进入前，此时还没有添加进入时的 CSS 样式。onEntering：组件进入中，此时添加了进入时的 CSS 样式，但是还没有添加进入后的 CSS 样式。onEntered：组件进入后，此时添加了进入后的 CSS 样式。
同样的，preact-transition-group 也提供了三个离开过程中的生命周期方法：
- onExit
- onExiting
- onExited
这三个方法分别对应着 CSSTransition 组件在离开过程中的三个状态：
onExit：组件离开前，此时还没有添加离开时的 CSS 样式。onExiting：组件离开中，此时添加了离开时的 CSS 样式，但是还没有添加离开后的 CSS 样式。onExited：组件离开后，此时添加了离开后的 CSS 样式。
-------------- ----------------- ------------- ------------- ----------- -- ----------------------- -------------- -- -------------------------- ------------- -- ------------------------- ---------- -- ---------------------- ------------- -- ------------------------- ------------ -- ------------------------ - ---- -------------------------- ----------- ----------------
多组件动画
在实际开发中，我们可能需要给多个组件都添加过渡动画，而不是只对一个组件进行过渡。preact-transition-group 提供了 <TransitionGroup> 组件，可以用于同时管理多个 <CSSTransition> 组件。
---------------- -----------------
----------------- -- -- -
--------------
-----------------
-------------
-------
-
-----------------
----------------
---
------------------在上面的示例中，我们使用了 <TransitionGroup> 组件将多个 <CSSTransition> 组件管理起来，通过遍历 items 数组来动态生成 <CSSTransition> 组件。这样可以使得我们的过渡动画变得更加简洁易懂。
总结
preact-transition-group 是一个非常优秀的过渡动画库，它能够帮助我们轻松实现组件之间的过渡动画效果。通过本文的介绍，相信大家已经对 preact-transition-group 的使用有了更深入的了解。在实际开发中，我们可以结合自己的业务场景，适当地使用 preact-transition-group，使得页面变得更加生动有趣。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedcb90b5cbfe1ea0612624