概述:
在react开发的过程中,有时候需要给特定的页面或组件单独加上过渡动画,特别是给某个路由页面增加动画的时候,需要在页面组件中添加比较多的操作,并且每次需要添加动画的时候都要写一遍,实在比较麻烦,同时也增加了代码量和可读性,出于这个理由,把单组件过渡进行封装显的非常必要,在这里,采用了HOC的形式
需求:
- 单个组件进入和离开时需要动画
- 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 {CSSTransiti