Reactに挑戦してみる 17
概要
Reactに挑戦してみる17。
参考書籍
WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用
- 作者: 柴田文彦
- 出版社/メーカー: インプレス
- 発売日: 2016/11/25
- メディア: 単行本（ソフトカバー）
- この商品を含むブログを見る
アニメーションのテクニック
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にまとめて処理できるのがいいのか！確かに便利ぽいな。
