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