在react中，我们主要使用react-transition-group实现动画过度效果，本文将讨论如何在react项目中实现过度动画效果。

安装

# npm
npm install react-transition-group --save# yarn
yarn add react-transition-group

官方提供的三个组建Transition,CSSTransition,TransitonGroup。

使用

1.Transition

过渡组件(Transiton)允许您用一个简单的声明性API描述随着时间的推移从一个组件状态到另一个组件状态的转换。最常用的是用来动画一个组件的安装和卸载，但也可以用来描述在适当的过渡状态。默认情况下，该组件不会更改其呈现的组件的行为，它只跟踪组件的“进入”和“退出”的状态。由你来为这些状态定义效果。

//自己简单的封装了一个，该有的参数都由了，可以自行粘贴在自己的代码里面去试试。
class Fade extends React.Component {constructor(props) {super(props);}done =() => {// console.log('结束了')}addaddEndListener = (node) => { //原生时间transition运动的事件node.addEventListener('transitionend', this.done, false);}// 三个进入状态的事件，可以做你想做的事情onEnter = (node, isAppearing) => {console.log(isAppearing, 'onEnter')}onEntering = (node, isAppearing) => {console.log(isAppearing, 'onEntering')}onEntered = (node, isAppearing) => {console.log(isAppearing, 'onEntered')}// 三个退出的状态的事件onExit = (node) => {console.log('onExit')}onExiting = () => {console.log('onExiting')}onExited = () => {console.log('onExited')this.props.self()}render() {const { in: inProp, dur} = this.props;const defaultStyle = {transition: `transform ${300}ms ease-in-out, opacity ${300}ms ease-in-out`,transform: 'translateX(100px)',opacity: '0'}const transitionStyles = {entering: { transform: 'translateX(100px)', opacity: '0'},entered:  { transform: 'translateX(0px)', opacity: '1' },exiting: {transform: 'translateX(0px)', opacity: '1'},exited: {transform: 'translateX(0px)', opacity: '0'}};const duration = {enter: 300,exit: 300,}// 上面的都是基本参数，样式的转变以及时间的设定，具体的可以看官网文档// 样式也可以写成className 例如<MyComponent className={`fade fade-${status}`} />return (<Transition onEnter={this.onEnter}onEntering={this.onEntering}onEntered={this.onEntered}onExit={this.onExit}onExiting={this.onExiting}onExited={this.onExited}addEndListener={this.addaddEndListener} in={inProp} unmountOnExit={false} // 为true 代表退出的时候移除domappear={true} // 为true  渲染的时候就直接执行动画，默认false，timeout={duration}>{state => {console.log(state, '###') //你可以很直观的看到组件加载和卸载时候的状态return(<div style={
   {...defaultStyle,...transitionStyles[state]}}>{this.props.children}</div>)}}</Transition>);}
}

Transition组件本身不会对其子组件执行任何操作。它所做的是跟踪一段时间内的转换状态，以便在更改状态时更新组件（例如通过添加样式或类）。

Transition可以有4种主要状态：

entering
entered
exiting
exited
//组件的初始化状态都停留在exited

调用方法：

let num = 1;
class Dnd extends React.Component {state = {ins: true,current: 1,dom: <div className={l.test}>ceshi weizhi {num}</div>}handle = (bool) => {this.setState({test: !bool})}end = () => {const that = this;num = num + 1;setTimeout(function () {that.setState({test: true,dom: <div className={l.test}>888888 {num}</div>}) }, 500)}render () {const { location } = this.propsconst { test } = this.state;return (<MainLayout location={location}><Button onClick={this.handle.bind(null, this.state.test)}>点击transition</Button><Fade in={this.state.test} self={this.end}>{this.state.dom}</Fade></MainLayout>)}
}
// 效果是每次点击按钮都会进行一次进场和出场的动画。也可以自行衍生。

2.CSSTransition

class Example extends Component{state={isShow:true}render(){return (<div><h2>CSSTransition</h2><CSSTransitionin={this.state.isShow}classNames="message"unmountOnExit//是否占茅坑timeout={5000}//消失延迟appear = {true}>{<div className="box">看我秀你一脸狗屎</div>} </CSSTransition><p><button onClick= {() => this.setState({isShow: !this.state.isShow})}>toggle</button></p></div>)}
}

相对应的钩子函数如下：

classNames={
   {appear: 'my-appear',appearActive: 'my-active-appear',enter: 'my-enter',enterActive: 'my-active-enter',enterDone: 'my-done-enter,exit: 'my-exit',exitActive: 'my-active-exit',exitDone: 'my-done-exit,
}}

附相关css：

.message-enter, .message-appear {opacity: 0;/* transform: scale(0.9) translateY(50%); */}.message-enter-active, .message-appear-active {opacity: 1;/* transform: scale(1) translateY(0%); */transition: all 1000ms ease-out;}.message-enter-done {opacity: 1;}.message-exit {opacity: 1;/* transform: scale(1) translateY(0%); */}.message-exit-active {opacity: 0.01;/* transform: scale(0.9) translateY(50%); */transition: all 1000ms ease-out;}.message-exit-done {opacity: 0;/* transform: scale(1) translateY(0%); */}

3.TransitionGroup

class Example extends Component{state = {isShow: true,items: [{id: uuid(), text: 'Hello World'},{id: uuid(), text: 'Hello React'},]}render () {return (<div><TransitionGroup>{this.state.items.map(item => (<CSSTransitionkey = {item.id}timeout = {1000}classNames = "message"unmountOnExit>{(state) => (<h3 >{item.text} -- {state}</h3>)}</CSSTransition>))}</TransitionGroup><p><button onClick= {() => {this.setState({items: [ ...this.state.items, {id: uuid(), text: 'new Hello'}]})}}>add</button></p></div>)}
}

（css同第二部分）

请注意，<TransitionGroup> 没有定义任何动画行为！究竟如何列表项动画是由个人<Transition> 组成部分。