如何使用 React 快速的实现一个 Transition 过渡动画组件？

过渡动画使 UI 更富有表现力并且易于使用。如何使用 React 快速的实现一个 Transition 过渡动画组件？

基本实现
实现一个基础的 CSS 过渡动画组件，通过切换 CSS 样式实现简单的动画效果，也就是通过添加或移除某个 class 样式。因此需要给 Transition 组件添加一个 toggleClass 属性，标识要切换的 class 样式，再添加一个 action 属性实现样式切换，action 为 true 时添加 toggleClass 到动画元素上，action 为 false 时移除 toggleClass。

安装 classnames 插件：

npm install classnames --save-dev
classnames 是一个简单的JavaScript实用程序，用于有条件地将 className 连接在一起。

在 components 目录下新建一个 Transition 文件夹，并在该文件夹下新建一个 Transition.jsx 文件：

import React from 'react'
import classnames from 'classnames'

/**
 * css过渡动画组件
 *
 * @visibleName Transition 过渡动画
 */
class Transition extends React.Component {
  render() {
    const { children } = this.props
    const transition = (
              className={
          classnames({
            transition: true
          })
        }
        style={
          {
            position: 'relative',
            overflow: 'hidden'
          }
        }
      >
                  className={
            classnames({
              'transition-wrapper': true
            })
          }
        >
          { children }
       

     

    )
    return transition
  }
}

export default Transition
这里使用了 JSX，在 JSX 中，使用 camelCase（小驼峰命名）来定义属性的名称，使用大括号“{}”嵌入任何有效的 JavaScript 表达式。
如：

const name = 'Josh Perez';
const element =

Hello, {name}

;
等价于：

const element =

Hello, Josh Perez

;
注意：
因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。
例如，JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex。

另外，在 React 中，props.children
包含组件所有的子节点，即组件的开始标签和结束标签之间的内容（与 Vue 中 slot 插槽相似）。例如：

默认按钮
在 Button 组件中获取 props.children，就可以得到字符串“默认按钮”。

接下来，在 Transition 文件夹下新建一个 index.js，导出 Transition 组件：

import Transition from './Transition.jsx'

export { Transition }

export default Transition
然后，在 Transition.jsx 文件中为组件添加 props 检查并设置 action 的默认值：

import PropTypes from 'prop-types'

const propTypes = {
  /** 执行动画 */
  action: PropTypes.bool,
  /** 切换的css动画的class名称 */
  toggleClass: PropTypes.string
}

const defaultProps = {
  action: false
}
这里使用了 prop-types 实现运行时类型检查。

注意：
prop-types 是一个运行时类型检查工具，也是 create-react-app 脚手架默认配置的运行时类型检查工具，使用时直接引入即可，无需安装。

完整的 Transition 组件代码如下：

import React from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'

const propTypes = {
  /** 执行动画 */
  action: PropTypes.bool,
  /** 切换的css动画的class名称 */
  toggleClass: PropTypes.string
}

const defaultProps = {
  action: false
}

/**
 * css过渡动画组件
 *
 * @visibleName Transition 过渡动画
 */
class Transition extends React.Component {

  static propTypes = propTypes

  static defaultProps = defaultProps

  render() {
    const {
      className,
      action,
      toggleClass,
      children
    } = this.props
    const transition = (
              className={
          classnames({
            transition: true
          })
        }
        style={
          {
            position: 'relative',
            overflow: 'hidden'
          }
        }
      >
                  className={
            classnames({
              'transition-wrapper': true,
              [className]: className,
              [toggleClass]: action && toggleClass
            })
          }
        >
          { children }
       

     

    )
    return transition
  }
}

export default Transition
现在，可以使用我们的 Transition 组件了。

CSS 代码如下：

.fade {
  transition: opacity 0.15s linear;
}

.fade:not(.show) {
  opacity: 0;
}
JS 代码如下：

import React from 'react';
import Transition from './Transition';

class Anime extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      action: true
    }
  }
  
  render () {
    const btnText = this.state.action ? '淡出' : '淡入'
    return (
     

                  className="fade"
          toggleClass="show"
          action={ this.state.action }
        >
          淡入淡出
       
                  style={{ marginTop: '20px' }}
          onClick={() => this.setState({ action: !this.state.action })}
        >
          { btnText }
       
     

    )
  }
}
然后，在你需要该动画的地方使用 Anime 组件即可。

实现 Animate.css 兼容
Animate.css 是一款强大的预设 CSS3 动画库。接下来，实现在 Transition 组件中使用 Animate.css 实现强大的 CSS3 动画。

由于 Animate.css 动画在进入动画和离开动画通常使用两个效果相反的 class 样式，因此，需要给 Transition 组件添加 enterClass 和 leaveClass 两个属性，实现动画切换。

import React from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'

const propTypes = {
  /** 执行动画 */
  action: PropTypes.bool,
  /** 切换的css动画的class名称 */
  toggleClass: PropTypes.string,
  /** 进入动画的class名称，存在 toggleClass 时无效 */
  enterClass: PropTypes.string,
  /** 离开动画的class名称，存在 toggleClass 时无效 */
  leaveClass: PropTypes.string
}

const defaultProps = {
  action: false
}

/**
 * css过渡动画组件
 *
 * @visibleName Transition 过渡动画
 */
class Transition extends React.Component {

  static propTypes = propTypes

  static defaultProps = defaultProps

  render() {
    const {
      className,
      action,
      toggleClass,
      enterClass,
      leaveClass,
      children
    } = this.props
    return (
              className={
          classnames({
            transition: true
          })
        }
        style={
          {
            position: 'relative',
            overflow: 'hidden'
          }
        }
      >
                  className={
            classnames({
              'transition-wrapper': true,
              [className]: className,
              [toggleClass]: action && toggleClass,
              [enterClass]: !toggleClass && action && enterClass,
              [leaveClass]: !toggleClass && !action && leaveClass,
            })
          }
        >
          { children }