过渡动画库 react-transition-group

react-transition-group 库可以帮助开发者方便地实现组件进入和退出的过渡动画。

React 曾为开发者提供过动画插件 react-addons-css-transition-group，后来改由社区维护，形成了现在的 react-transition-group 库。

安装：

npm install react-transition-group --save。

主要组件：

react-transition-group 库主要包含四个组件：

Transition：

该组件是一个和平台无关的组件。

CSSTransition：

CSSTransition 是基于 Transition 组件构建的，通过在合适的时机添加、移除类名来实现过渡效果。

在前端开发中，一般是结合 CSS 来完成样式，所以通常使用 CSSTransition 来完成过渡动画效果。

属性：

1. in：触发组件的 enter 或者 exit 状态。
   • 当 in 为 true 时，触发进入状态，会为组件添加 -enter、-enter-active 的 class，开始执行动画；当动画执行结束后，会移除 -enter、-enter-active 的 class，并且添加 -enter-dene 的 class。
   • 当 in 为 false 时，触发退出状态，会为组件添加 -exit