기본적으로 3가지 상태가 있다.

• Enter
  • 자식 요소가 mount로 추가될때
• Leave
  • 자식 요소들이 unmount로 사라질때
• Appear (기본값: false)
  • 초기 mount될때

Enter, Leave의 경우 자식 요소의 key값이 무조건 있어야 하고, key값을 기준으로 추가, 삭제되는 자식 요소에

기본으로 {name}-{status} 클래스를 가지고 있고 상태 변경 시 {name}-{status}-active 클래스를 추가한다.

import React, {Component} from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import TodoItem from "./TodoItem";

class TodoList extends Component {
	render() {
		return (
			<div className="row">
				<div className="col s12">
					<ul className="collection">
						<ReactCSSTransitionGroup
							transitionName="example"
							transitionEnterTimeout={10000}
							transitionLeaveTimeout={10000}
						>
							{this.props.todos.map((todo) => (
								<TodoItem key={todo.id} todo={todo} onDelete={this.props.onDelete} />
							))}
						</ReactCSSTransitionGroup>
					</ul>
				</div>
			</div>
		);
	}
}

export default TodoList;

.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}