概述：

在react開發的過程中，有時候需要給特定的頁面或元件單獨加上過渡動畫，特別是給某個路由頁面增加動畫的時候，需要在頁面元件中新增比較多的操作，並且每次需要新增動畫的時候都要寫一遍，實在比較麻煩，同時也增加了程式碼量和可讀性，出於這個理由，把單元件過渡進行封裝顯的非常必要，在這裡，採用了HOC的形式

需求：

1. 單個元件進入和離開時需要動畫
2. HOC應該給包裹過的元件新增一個prop 用於退出元件

廢話不多說，直接上程式碼

先看使用方法

import React, { Component } from 'react';
import { withSingleTransition } from "../../../components/withTransition/with-single-transition/with-single-transition";

@withSingleTransition('page', 300)
class page extends Component {

  goBack = () => {
    this.props.goBack().then(() => do something)
    //  注意 如果過渡的是路由，需要在then裡顯式的呼叫push 或 goBack方法，否則路由不會解除安裝
    // this.props.goBack().then(() => this.props.history.goBack())
  };
  .....
  .....
}

 

import React from 'react';
import {CSSTransition} from 'react-transition-group';

export function withSingleTransition(classNames = 'page', timeout = 500) {
  return function(WrappedComponent) {
    return class Comp extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          in: true
        };
        this.goBack = this.goBack.bind(this);
      }
      goBack() {
        const that = this;
        return new Promise((resolve) => {
          that.setState({in: false});
          setTimeout(() => {
            resolve()
          }, timeout)
        });
      }
      render() {
        return (
          <CSSTransition timeout={timeout}
                         in={this.state.in}
                         classNames={classNames}
                         appear={true}
                         unmountOnExit={true}>
            <WrappedComponent {...this.props} goBack={this.goBack}/>
          </CSSTransition>
        )
      }
    }
  }
}
 

在這裡，因為實在元件內部使用過渡，所以過渡元件掛載的時候需要立即呼叫，設定appear={true}

所以最後，需要新增的樣式為
xxx-appear、xxx-appear-active、 xxx-enter-done、xxx-exit、xxx-exit-active、xxx-exit-done