Reactに挑戦してみる 18
概要
Reactに挑戦してみる16。アドオン使ってみる。
参考書籍
WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用
- 作者: 柴田文彦
- 出版社/メーカー: インプレス
- 発売日: 2016/11/25
- メディア: 単行本（ソフトカバー）
- この商品を含むブログを見る
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')
);
これはシンプルでわかりやすい！
