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

Djangoroidの奮闘記

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

Reactに挑戦してみる 19

概要

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

参考書籍

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

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

トランスフォームを使ってみる。

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title>CSS Animation React Example</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;
// 縦横共に5倍に拡大に設定したクラスを定義する
            transform: scale(5.0, 5.0);
        }
        .fadingText-enter.fadingText-enter-active{
            opacity: 1;
// コンポーネントが表示された後の状態としてscaleを等倍に戻す。
            transform: scale(1.0, 1.0);
            transition: 1500ms;
        }
        .fadingText-leave{
            opacity: 1;
// translate 0,0 -> 移動なし
            transform: translate(0px, 0px);
        }
        .fadingText-leave.fadingText-leave-active{
            opacity: 0;
// translate 300px, 0 -> 横方向に300pxずれた状態に設定 
            transform: translate(300px, 0px);
            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>

これめっちゃいい!