読者です 読者をやめる 読者になる 読者になる

Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

Reactに挑戦してみる 18

概要

Reactに挑戦してみる16。アドオン使ってみる。

参考書籍

WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用

WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用

Reactアドオンによる初期マウントのアニメーション

コンポーネントが初めて描画される時?にアニメーションを表示させる。 appearを使う。

html

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title>Pref Add-on Exapmle</title>
      <script src="http://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-with-addons.js"></script>
      <script src="http://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.js"></script>
      <script src="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>

    <style>
        .fadingText-enter {
            opacity: 0;
        }
        .fadingText-enter.fadingText-enter-active{
            opacity: 1;
            transition: 1500ms;
        }
        .fadingText-leave{
            opacity: 1;
        }
        .fadingText-leave.fadingText-leave-active{
            opacity: 0;
            transition: 500ms;
        }
        .fadingText-appear{
            opacity: 0;
        }
        .fadingText-appear.fadingText-appear-active{
            opacity: 1;
            transition: 800ms;
        }
    </style>
    </head>

  <body>
    <div id="content"></div>
    <script type="text/babel" src="appear.js"></script>
  </body>
</html>

JSX

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

var CheckAnimate = React.createClass({
    getInitialState: function(){
        return {checked: false,
                visibleText: ''};
    },
    checkChange: function(event){
        if (event.target.checked) {
            this.setState({visibleText: '普段は見えないテキスト'})
        } else {
            this.setState({visibleText: ''})
        }
        this.setState({checked: event.target.checked});
    },
    render: function(){
        return (<div>
            <ReactCSSTransitionGroup
                transitionName="fadingText"
                transitionEnterTimeout={1500}
                transitionLeaveTimeout={500}
                transitionAppear={true}
                transitionAppearTimeout={800}>
            <div>
                <input
                type="checkbox"
                checked={this.state.checked}
                onChange={this.checkChange}
                />隠れたテキストを表示
            </div>
            <h2 key={this.state.checked}>{this.state.visibleText}</h2>
            </ReactCSSTransitionGroup>
        </div>);
    }
});

ReactDOM.render(
    <CheckAnimate />,
    document.getElementById('content')
);

これはシンプルでわかりやすい!