Reactに挑戦してみる 19
概要
Reactに挑戦してみる16。アドオン使ってみる。
参考書籍
WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用
- 作者: 柴田文彦
- 出版社/メーカー: インプレス
- 発売日: 2016/11/25
- メディア: 単行本（ソフトカバー）
- この商品を含むブログを見る
トランスフォームを使ってみる。
<!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;
// 縦横共に５倍に拡大に設定したクラスを定義する
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>
これめっちゃいい！
