Reactのアニメーションアドオン'react-transition-group'を試してみた

ドキュメントに書かれていますがReactTransitionGroupとReactCSSTransitionGroupはReact v15.5.0以上では非推奨となったようです。
代わりにreact-transition-groupのTransitionGroupとCSSTransitionGroupを使うことが推奨されるようです。
マニュアル通りですが備忘録てきに...

react-transition-groupのインストール

$ yarn add react-transition-group

インストールはこれだけです。

サンプルソース

ほとんどサンプルのままですが完成形は以下のようになります。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
// React-Transition-Groupをインポート
import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';

class TodoList extends Component {
	constructor(props) {
		super(props);
		this.state = {
			items: []
		};
	}
	handleClick() {
		// プロンプトを表示し追加された内容をstateに追加
		let val = prompt('Please enter something.');
		if (val === null) return;

		const newItems = this.state.items.concat([val]);
		this.setState({ items: newItems });
	}
	handleRemove(index) {
		// クリックした行をstateから削除
		let newItems = this.state.items.slice();
		newItems.splice(index, 1);
		this.setState({ items: newItems });
	}
	render() {
		// stateに保存されているリスト
		const items = this.state.items.map((item, i) => (
			<li key={ i } onClick={ () => this.handleRemove(i) }>
				{ item }
			</li>
		));
		return (
			<div>
				<button onClick={ this.handleClick.bind(this) }>Add</button>
				<CSSTransitionGroup
					component="ul"
					transitionName="example"
					transitionEnterTimeout={ 500 }
					transitionLeaveTimeout={ 300 }>
					{ items }
				</CSSTransitionGroup>
			</div>
		);
	}
}

ReactDOM.render(<TodoList />, document.querySelector('#app'));

jsファイルではまずreact-transition-group/CSSTransitionGroupをインポートします。
あとはコンポーネントとして使用するだけです。

属性	型	値	説明
transitionName	string	example	CSSのclass名（任意）
transitionAppear	bool	true	マウント時のアニメーション
transitionAppearTimeout	number	500	マウント時のタイムアウト
transitionEnter	bool	true	追加時のアニメーション
transitionEnterTimeout	number	500	追加時のタイムアウト
transitionLeave	bool	true	削除時のアニメーション
transitionLeaveTimeout	number	300	削除時のタイムアウト

CSSTransitionGroupはデフォルトでspanタグが出力されます。公式サンプルではdivで囲んでいるので良いかもしれませんが上のサンプルではliにしてみたのでそのような場合はcomponent="ul"とすればOK。

.example-enter {
	opacity: 0.01;
	&#{&}-active {
		opacity: 1;
		transition: opacity .5s ease-in;
	}
}
.example-leave {
	opacity: 1;
	&#{&}-active {
		opacity: 0.01;
		transition: opacity .3s ease-in;
	}
}

{transitionName}-appear、{transitionName}-enterと{transition}-leaveが基本の形になります。-activeでアニメーションのcssを書くことで動作します。（classの規約を変更することもできるようです）

JSのマイグレーション

上のサンプルで動作することは確認ができましたがコンソールに以下のWarningが表示されます。

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

これもReact v15でPropTypesが非推奨になったためのようです。

参考サイト

https://github.com/reactjs/react-codemod
http://blog.koba04.com/post/2017/04/14/react-dot-js-v155-and-v16/
http://qiita.com/azu/items/9d1985bf0140576894aa