react-transition-group中TransitionGroup配合CSSTransition做列表动画渲染

1、js文件

import React, { Component, Fragment } from 'react'
import { CSSTransition, TransitionGroup } from 'react-transition-group'
import './style.css'

class App extends Component {

	constructor(props) {
		super(props)
		this.state = {
			list: []
		}
		this.handleAddItem = this.handleAddItem.bind(this)
	}

	render() {
		return (
			<Fragment>

				<TransitionGroup>
					{
						this.state.list.map((item, index) => {
							return (
								<CSSTransition
									in={ this.state.show }
									timeout={ 1000 }
									classNames='fade'
									unmountOnExit
									onEntered={el => {el.style.color = 'blue'}}
									appear={true}
									key={index}
								>
									<div>{item}</div>
								</CSSTransition>
							)
						})
					}
				</TransitionGroup>
				<button onClick={this.handleAddItem}>add</button>
			</Fragment>
		)
	}

	handleAddItem() {
		this.setState((prevState) => {
			return {
				list: [...prevState.list, 'item']
			}
		})
	}
}

export default App

2、css文件

/*入场动画开始*/
.fade-enter {
  opacity: 0;
}

/*入场动画过程*/
.fade-enter-active {
  opacity: 1;
  transition: opacity 1s ease-in;
}

/*入场动画结束*/
.fade-enter-done {
  opacity: 1;
}

/*离场动画开始*/
.fade-exit {
  opacity: 1;
}

/*离场动画过程*/
.fade-exit-active {
  opacity: 0;
  transition: opacity 1s ease-in;
}

/*离场动画结束*/
.fade-exit-done {
  opacity: 0;
}

/*页面第一次加载时的开始状态*/
.fade-appear {
  opacity: 0;
}

/*页面第一次加载时的动画过程*/
.fade-appear-active {
  opacity: 1;
  transition: opacity 1s ease-in;
}

3、效果

CSSTransition可参考上一篇博文 https://blog.csdn.net/scorpio_h/article/details/85205579