前端技术中的动画效果在网页设计中扮演着重要的角色，众多的动效库和框架层出不穷。React 作为当前流行的前端库其在动画效果的实现优势十分明显。本篇文章将会介绍 React 如何实现复杂动画效果。
React 动画库
React Native 中已经内置了一个名为 Animated 的动画库，但是在 React.js 中并没有内置的动画库，所以，需要使用第三方库。React 的官方文档推荐了一个名为 React Transition Group 的库，这是一个常用且方便的动画效果库。
React Transition Group
React Transition Group 可以让在 React.js 中实现动画效果变得更加容易，提供了通用的过渡组件，如 Transition 和 CSSTransition。不仅如此，它还可以自定义过渡组件以满足特殊的设计需求。
Transition
Transition 是一个简单的动画组件，通过制定一些 props 和 CSS 样式就可以实现过渡效果。
-- -------------------- ---- -------
------ - ---------- - ---- -------------------------
----- -------- - ----
----- ------------ - -
----------- -------- ------------- -------------
-------- --
--
----- ---------------- - -
--------- - -------- - --
-------- - -------- - --
-------- - -------- - --
------- - -------- - --
--
----- ----------- - -- --- ------ -- -- -
----------- ----------- -------------------
-------- -- -
----
--------
----------------
---------------------------
--
-
- -- - ----- ----------
------
--
-------------
--在这个例子中，我们声明了一个 Transition 组件，并通过 props 规定了动画时长和 CSS 样式。我们也声明了一些 transitionStyles，这里代表着进入、离开和过渡状态的样式。随着组件的进入和离开状态的变化，我们通过 transitionStyles 来转换 opacity 样式属性。
CSSTransition
CSSTransition 是另一个实现过渡效果的组件，不同于 Transition 它使用了 CSS 类（class）的方式，它可以让我们用 CSS 和 JavaScript 来同步管理动画的状态。例如，我们可以用 :hover 伪类来实现悬浮效果。
import { CSSTransition } from "react-transition-group";
import "./animation.css";
const MyComponent = ({ in: inProp }) => (
<CSSTransition in={inProp} timeout={200} classNames="animation">
<h1>Hello, React!</h1>
</CSSTransition>
);上面的代码中用了一个叫做 “animation” 的自定义 CSS 类，这里是演示：
-- -------------------- ---- ------- ---------------- - -------- ----- - --------------------------------------- - -------- -- ----------- ------- ----- -------- - --------------- - -------- -- - ------------------------------------- - -------- ----- ----------- ------- ----- -------- -
就像 Transition 一样，CSSTransition 也总是依据 in prop 判断组件处于进入或离开状态，类名被添加或删除。
自定义 Transition 组件
有时候我们会遇到一些特殊的需求，比如按一定的路径运动，线性运动、位移运动等。此时我们就需要对 Transition 或 CSSTransition做一些自定义配置。
-- -------------------- ---- -------
------ - ---------- - ---- -------------------------
----- -------- - ----
----- ------------ - -
----------- ---------- ------------- -------------
---------- ----------------
--
----- ---------------- - -
--------- - ---------- ------------------- --
-------- - ---------- --------------- --
-------- - ---------- ------------------- --
------- - ---------- --------------- --
--
----- ----------- - -- --- ------ -- -- -
----------- ----------- -------------------
-------- -- -
----
--------
----------------
---------------------------
--
-
- -- - ----- ----------
------
--
-------------
--在这个例子中，我们声明了一个 Transform Transition 组件，主要是用一个 TranslateX 坐标系来实现移动过渡。同样在这个例子中，我们通过 transitionStyles 来控制组件的进入、离开和过渡状态。这里比前面的例子新增了 transform 样式属性。
这里之所以新增了 transform 样式属性，是因为我们要让组件在横向方向上移动。
总结
React Transition Group 是 React 中一款重要的动画库，它可以让我们使动画的实现变得更加容易。本文从 Transition、CSSTransition 到自定义 Transition 组件，全方位的介绍了 React 动画库的基础用法。希望通过这篇文章能够帮助读者进一步掌握 React 动画的实现技术，提高前端开发的技术水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a682e248841e989432657e