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

Djangoroidの奮闘記

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

Reactに挑戦してみる 17

概要

Reactに挑戦してみる17。

参考書籍

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

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

アニメーションのテクニック

ReactTransitionGroup, ReactCSSTransitionGroupの2つのアドオンを連携して使うことが多いぽい。

CSSのアニメーションのおさらい

マウスを置くと、transitionのスピードで、opacity(透明度?)が指定した値になるという設定。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS Animation Example</title>
        <style>
            .hidden {
                opacity: 0.1;
                transition: 0.5s;
            }
            .hidden:hover{
                opacity: 0.8;
                transition: 1.5s;
                }
        </style>
    </head>
    <body>
        <h2 class="hidden"> 普段は見えないテキスト </h2>
    </body>
</html>

次にチェックボックスの値により、変遷する場合

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS Animation Example</title>
        <style>
            .hidden {
                opacity: 0.1;
                transition: 0.5s;
            }
            .shown {
                opacity: 0.9;
                transition: 1.5s;
                }
        </style>
    </head>
    <body>
        <input type="checkbox" id="cb1" onClick=checkChange()>
        隠れたテキストを表示
        <h2 class="hidden" id="text1"> 普段は見えないテキスト </h2>
        <script>
            function checkChange(){
                var text1 = document.getElementById('text1');
                if (document.getElementById('cb1').checked) {
                text1.className = 'shown';
            } else {
                text1.className = 'hidden';
            }
        }
        </script>
    </body>
</html>

Reactで簡単なアニメーションを使ってみる。

一番のポイントは、「アニメーション効果を加えたい部分をReactCSSTransitionGroup」というタグでくくることらしい。

まずは、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>
// 4つのcssを設定する。そのうち、enter とleaveという2つのグループに分ける。
        .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;
        }
    </style>
    </head>

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

addonanimation.jsを作成する

// addonを変数に代入して使いやすくしておく。
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

// CheckAnimateというコンポーネントを作る
var CheckAnimate = React.createClass({

// Stateの初期化を設定
    getInitialState: function(){
        return {checked: false,
                visibleText: ''};
    },

// checkボックスが変化した時に呼び出すメソッドをセットする。
    checkChange: function(event){
        if (event.target.checked) {
// checked = trueの場合、visibleTextを表示させる。逆の場合は、空欄。
            this.setState({visibleText: '普段は見えないテキスト'})
        } else {
            this.setState({visibleText: ''})
        }
// また、event.target.checkedをcheckedの変数に代入する。
        this.setState({checked: event.target.checked});
    },

// renderメソッドを設定する。
    render: function(){
        return (<div>
// checkboxの設定
            <input
                type="checkbox"
                checked={this.state.checked}
                onChange={this.checkChange}
            />隠れたテキストを表示
ReactCSSTransitionGroup
            <ReactCSSTransitionGroup
// ここから、ReactCSSTransitionGroupの設定を開始する。
                transitionName="fadingText"
                transitionEnterTimeout={1500}
                transitionLeaveTimeout={500}>
                <h2 key={this.state.checked}>{this.state.visibleText}</h2>
            </ReactCSSTransitionGroup>
        </div>);
    }
});

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

fadingTextをgroupにまとめて処理できるのがいいのか!確かに便利ぽいな。